redux个人理解 以及react-redux的使用

store 字典数据中心

const initState={
    inputValue:'123',
    list:[1,2]
}

reducer 相当于字典的目录，怎么操作字典

reducer就是一个函数，两个参数，第一个参数是store，第二个参数是操作方法

根据操作，修改store，然后返回一个新的store

const reducer=(state=initState,action)=>{
    if(action.type==='add_todo_item'){
        
    }
}

创建数据中心，然后再view层下发下去

export const store=createStore(reducer)

 

redux中dispatch()方法的参数是一个action只能是对象

handleClick(event){
    store.dispatch({
        type:'add_todo_item',
        value:event.target.value
    })
}

redux-thunk是一个异步修改store的中间件，这个中间件的功能也很简单就是让dispath()可以传递函数型参数

changeHomeData() {
    dispatch(getHomeInfo());
}

什么是redux中间件，谁和谁之间呢

在view层通过store提供的dispath()，派发出一个action，store接收到action后，会将action和自身的state一起再转给reducer，reducer返回一个新的数据给store，stroe按照新的数据去改变自己的state，然后state变化会自动通知view层变化

中间件指的是action和store之间

redux中action只能是对象，当使用了react-thunk之后action可以是一个函数

中间件就是对dispatch方法的一个封装升级

如果dispath()方法的参数如果是一个对象，dispatch就会直接把这个参数直接传递给store

但是如果传递dispatch()方法的参数是一个函数，这个时候使用了中间件的dispatch()方法已经升级了，它就不会直接把参数传递给store，它会让函数先执行，执行完了之后，需求给store，再传递给store

比如说记录日志的中间件，就是每一次的action都会经过dispath，那就可以再dispatch每次将action传递给store之前，打印日志

题外话

redux-thunk是将异步放在了action中处理

redux-saga是将异步单独拆封出来一个文件，集中管理

使用react-redux库在view层下发store

import { Provider } from 'react-redux';

<Provider store={store}>
    <BrowserRouter>
      <div>
        <Header />
        <Route path='/' exact component={Home}></Route>
        <Route path='/login' exact component={Login}></Route>
        <Route path='/write' exact component={Write}></Route>
        <Route path='/detail/:id' exact component={Detail}></Route>
      </div>
    </BrowserRouter>
  </Provider>

 

组件中接收state和dispatch事例，主要看下mapToState和mapToDispatch

import React, { PureComponent } from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { LoginWrapper, LoginBox, Input, Button } from './style';
import { actionCreators } from './store';

class Login extends PureComponent {
  render() {
    const { loginStatus } = this.props;
    if (!loginStatus) {
      return (
        <LoginWrapper>
          <LoginBox>
            <Input placeholder='账号' innerRef={(input) => {this.account = input}}/>
            <Input placeholder='密码' type='password' innerRef={(input) => {this.password = input}}/>
            <Button onClick={() => this.props.login(this.account, this.password)}>登陆</Button>
          </LoginBox>
        </LoginWrapper>
      )
    }else {
      return <Redirect to='/'/>
    }
  }
}

const mapState = (state) => ({
  loginStatus: state.getIn(['login', 'login'])
})

const mapDispatch = (dispatch) => ({
  login(accountElem, passwordElem){
    dispatch(actionCreators.login(accountElem.value, passwordElem.value))
  }
})

export default connect(mapState, mapDispatch)(Login);