React + Redux

React 中不使用状态管理时遇到的问题

在React组件通信的数据流是单向的，顶层组件可以通过props属性向下层组件传递数据。而下层组件不能像上层组件传递数据，要实现下层组件修改数据，需要上层组件传递修改数据的方法到下层组件，当项目越来越大的时候，组件之间传递的数据变得越来越困难。

下载 Redux

  1. npm install redux react-redux

三. React Redux - 图1

  1. 组件通过 dispatch 方法触发 Action；
  2. Store 接收 Action并将 Action 分发给 Reducer；
  3. Reducer 根据 Action 类型对状态进行更改并将更改后的状态返回给 Store；
  4. 组件订阅 Store 中的状态， Store中的状态更新会同步到组件；

react-redux

connect

  1. connect 方法会帮助我们订阅 store 当 store 中的状态发生更改的时候重新渲染组件
  2. connect 方法可以让我们获取 store 中的状态，将状态通过组件的props属性映射给组件
  3. connect 方法可以让我们获取 dispatch 方法

mapStateToProps

connect的第一个参数，返回一个对象

  1. const mapStateToProps = state => ({
  2.     showStatus: state.modal.show
  3. })

mapDispatchToProps

connect的第二个参数，返回一个对象

  1. // Modal.js
  2. import { connect } from 'react-redux';
  4. export default connect(mapStateToProps, mapDispatchToProps)(Modal);

bindActionCreators

绑定、分发action

  1. import { bindActionCreators } from 'redux';
  3. const mapDispatchToProps = dispatch => bindActionCreators(modalActions, dispatch);

为action传递参数

  1. <button onClick={() => increment(5)}> + 5</button>
  1. // reducer
  2. export default (state, action) => {
  3.   switch (action.type) {
  4.     case INCREMENT:
  5.       return {
  6.         count: state.count + action.payload
  7.       }
  8.   }
  9. }

合并reducer

  1. // root.reducer.js
  2. import { combineReducers } from 'redux';
  3. import counter from './counter.reducer';
  4. import modal from './modal.reducer';
  6. export default combineReducers({
  7.     counter,
  8.     modal
  9. })
  11. // reducers/index.js
  12. import { createStore } from 'redux';
  13. import reducer from './reducers/root.reducer'
  15. export const store = createStore(reducer);