React-redux

---

React-redux是React用来绑定redux的，其中不得不提及的是Provider，以及与其配合使用的高阶函数connect.下面我会详细的介绍一下它们的使用：

Provider

    首先，Provider需要放在包裹所有子组件的位置，以便其通过context将store传递给所有的子组件。子组件需要使用store中的state就需要用到connect高阶函数了。

Provider放置位置

connect（）高阶函数

    使用connect（）来获取store中的状态数据以及dispatch action（即分发函数）。

    connect（）函数有四个参数，分别是

        1.  mapStateToProps?: Function

        2.  mapDispatchToProps?: Function | Object

        3.  mergeProps?: Function

        4.  options?: Object

    其中，最常用的是前俩个参数，mapStateToProps,一般只传递一个参数state，用法如下：

define类型 mapStateToProps赋值

    上图中，会将登录人的信息存放在currentUserInfo这个对象中，然后在Props中定义之后就可以拿来使用。用法大家都知道哈，我就不罗嗦了。

对于mapDispatchToProps,如果connect函数中省略不写的话，默认可以在函数中通过this.props.dispatch（）的方式调用 ，括号中需要传入事先定义好的action Creator，这样就完成了对connect的使用。但是这样能够达到redux管理的效果吗？答案当然是no。

       想要真正的实现redux管理，还需要编写store.js以及action.js、reducer.js，其中action.js定义你要分发函数使用的一些creator和actionType。示例代码如下：

const START_LOGIN = 'AUTH/START_LOGIN';

const LOGIN_SUCCESS = 'AUTH/LOGIN_SUCCESS';

const LOGIN_FAILURE = 'AUTH/LOGIN_FAILURE';

const LOGOUT = 'AUTH/LOGOUT';

const LOGOUT_SUCCESS = 'AUTH/LOGOUT_SUCCESS';

const ActionTypes = {

  START_LOGIN,

  LOGIN_SUCCESS,

  LOGIN_FAILURE,

  LOGOUT,

  LOGOUT_SUCCESS,

};

/**

* 开始登录

*

* @param {string} userName

* @param {string} password

* @returns

*/

function startLogin(userName: string, password: string) {

  return {

    type: START_LOGIN,

    userName,

    password,

  };

}

/**

* 登录成功

*

* @param {object} user

* @returns

*/

function loginSuccess(user: object) {

  return {

    type: LOGIN_SUCCESS,

    user,

  };

}

function loginFailure() {

  return {

    type: LOGIN_FAILURE,

  };

}

function logout() {

  return {

    type: LOGOUT,

  };

}

function logoutSuccess() {

  return {

    type: LOGOUT_SUCCESS,

  };

}

const ActionCreators = {

  startLogin,

  loginSuccess,

  loginFailure,

  logout,

  logoutSuccess,

};

export { ActionTypes, ActionCreators };

reducer.js是触发action creator后执行的，会根据此时的actionType来判断执行，并且更新state，最后组件重新渲染的过程。

redux执行

  登录的reducer.js的关键代码：

function onLoginSuccess(state: object, action: ActionType) {

  return {

    ...state,

    loginStatus: 'LOGIN_SUCCESS',

    currentUser: {

      userName: action.user.username,

      password: action.user.password

    },

  };

}

export default function userLogin (state: object = defaultState, action: ActionType) {

  if (action.type === ActionTypes.START_LOGIN) {

    return {

      ...state,

      loginStatus: 'LOGINING',

    };

  } else if (action.type === ActionTypes.LOGIN_SUCCESS) {

    return onLoginSuccess(state, action);

  } else if (action.type === ActionTypes.LOGIN_FAILURE) {

    return {

      ...state,

      loginStatus: 'LOGIN_FAILURE',

    };

  } else if (

    action.type === ActionTypes.LOGOUT ||

    action.type === ActionTypes.LOGOUT_SUCCESS

  ) {

    return defaultState;

  }

  return state;

}

  重点是store.js的内容，用到的主要有redux的createStore，applyMiddleware，combineReducers，以及createBrowserHistory的createHistory方法。示例如下：

引入重要组件 关键代码 histroy代码

其中connectRouter是代替react-router-redux中的ConnectedRouter，由于在运行ConnectedRouter的过程中报错，找不到store，检查后也未解决，最后采用connected-react-router里面的connectRouter，最后路由信息随着页面跳转发生变化。这个案例的初衷是使用react-router-redux管理路由信息、登录信息等。大家有什么想法，欢迎一起探讨！QQ:1391038286