redux学习（中）

依照惯例，开头先放出redux中文文档地址

前文讲了redux的基础概念，这次学习一下redux和react的结合使用

React-Redux

说到redux在react中的使用，肯定绕不开react-redux这个库。首先声明，在react中使用redux并非一定要用react-redux，同样的redux也不是只能为react服务，它同样也支持vue、Angular、纯JS等等。这里使用react-redux更多的是考虑这已经算react生态圈的最佳实践了。

connect()

react-redux提供了connect()方法。
连接 React 组件与 Redux store。
连接操作不会改变原来的组件，返回一个新的已与Redux store连接的组件。
调用方法： connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])
讲解一下参数，基本都是顾名思义：
[mapStateToProps(state, {ownProps})](Function): 一个函数，返回一个对象，把store中的state传到UI组件上，也可以把容器组件自己的props传递过去
[mapDispatchToProps(dispatch, {ownProps}): dispatchProps)](Object or Function): 一个函数或对象，定义UI组件上的props和需要触发的Action之间的映射关系

标签

定义完connect()方法，想要生成容器组件还需把state传递给容器组件(回顾一下上面的逻辑，UI组件是我们自定义的，通过react-redux提供的connect()方法，我们已经把store中的state传给了UI组件的props，UI组件中需要触发store中state变化的Action函数也已经传入，但是我们只建立了这种连接关系，容器组件的state还没有定义)。标签作用就是通过react组件的context把store中的state直接传入。
例子：

ReactDOM.render(
    
        
    ,
rootElement
)

至此，如果不考虑异步场景，我们应该已经可以在react项目中使用redux了
下面在create-react-app脚手架上开始写一个简单的小例子：

• 初始化一个react项目，原始项目应该包含一个app首页
  
  

  react-app
• 在此项目基础上安装redux/react-redux/react-router等包
• 创建state相关目录（此处sagas非必要，仅在后文处理异步场景示例中使用到）
  
  

  image.png
• 在actions中创建action
  例如：

  function mark({ payload: id }) {
      return {
          type: 'MARK ITEM',
          payload: id
      };
  }
  

  在reducers中创建reduce
  例如：

  const initialUi = {
      backgroundColor: false
  };
  
  
  function markItem (state = initialUi, action) {
        let backgroundColor = state.backgroundColor;
  
        if (action.type === 'MARK ITEM') {
            backgroundColor = !backgroundColor;
            return backgroundColor;
        }
  
        return backgroundColor;
    }
  
    function ui (state = initialUi, action) {
        return {
            backgroundColor: markItem(state, action)
        }
    }
  
  export default ui;
  

  合并reducer

  import { combineReducers } from 'redux';  
  
  const reducer = combineReducers({
      ui
  }); 
  
  export default reducer;
  

  在store中创建store

  import { createStore, applyMiddleware } from 'redux';
  
  const store = createStore(
      reducer
  ); 
  
  export default store;
  

  在container组件中把组件属性和store相连

  import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { mark } from '../state/actions/ui';
  
  class example extends Component {
      constructor() {
          super();
      }
  
      render () {
          console.log(this.props)
          return (
              
  
                  { this.props.ui.backgroundColor }
                  
  
                    
   this.props.markItem(0)}>0
                    
   this.props.markItem(1)}>1
                    
   this.props.markItem(2)}>2
                
            
          );
      }
  }
  
  const mapStateToProps = (state) => {
      return {
          ui: state.ui
      }
  };
  
  const mapDispatchToProps = (dispatch) => {
      return {
          markItem: id => {
              dispatch(mark({ payload: id }));
          }
      };
  };
  
  
  const Example = connect(
      mapStateToProps,
      mapDispatchToProps
  )(example);
  

  在App中添加组件，同时引入react-router

  class App extends Component {
      render() {
          return (
            
  
              
  
                
                
  Welcome to React
              
              
                  ...
                  
                
              
            

); } } 在index.js中通过组件传入store

...
import { Provider } from 'react-redux';
import store from './state/store/store';
import App from './App';
... 

ReactDOM.render(
  
      
  ,
  document.getElementById('root')
);

初始状态.png

点一下状态发生改变.png

（这里介绍一个调试redux的小工具Redux DevTools，是一个中间件，使用方式可以自己看链接）

这就完成了把目前所有redux和react相关内容串联起来的小例子

（未完待续。。。）