react-redux状态机使用总结

react-redux状态机使用总结

react-redux简介

首先说redux，redux是一个第三方的状态管理库，react-redux是facebook官方出品的基于redux的专用于react项目做状态管理使用的插件。react-redux的工作模型图如下（仍然以技术器demo为例）：

使用方法

从上面的图可以看出react通过容器组件和redux进行通讯，通过store的getState方法获取状态，通过dispatch方法更改状态， 因为react-redux其实就是在redux的基础上做了对react项目的使用优化，因此本质上我们还是应该先创建store（创建过程不再赘述）。

创建容器组件和UI组件

其实对于初学者来说将UI组件和容器组件创建在不同目录（containers和components）更好理解，但实际项目中一般会写在同一个文件。

在工程目录下创建containers或者components文件夹（根据自己习惯或者公司开发规则命名），然后创建count文件夹以及Count.jsx组件

//Count.jsx
export default () => {
  return <div>Count Containers</div>;
};

这样一个最简单的react函数式组件就创建完成，然后在App.jsx文件里面引入并应用Count组件。但这个我们之所以叫做容器组件是因为他需要连接UI组件和store，首先就需要把store传递给Count容器组件，因此需要在App.jsx里面引入store并且传递给Count：

//App.jsx
import Count from "./components/count/Count";
import store from "./store/index";

const App = () => (
  <div className="app" style={{ height: "100%", overflowY: "auto" }}>
       <Count store={store} />
  </div>
);

export default App;

其实在Count.jsx里面创建的目前只是一个一般组件，但我们需要暴露的是容器组件， 因此我们需要利用react-redux提供的connect方法连接两者，该方法接受两个参数。第一个参数我们一般叫做mapStateToProps，就是声明我们的组件需要store里面的那些状态，第二个参数叫做mapDispatchToProps，顾名思义，该方法是申明组件需要store里面的哪些操作状态的方法。该方法会返回一个函数，然就继续调用该函数，传入UI组件返回容器组件，然后将容器组件暴露出去，所以该方法一般会以如下的使用方法被调用。

export default connect(mapStateToProps, mapDispatchToProps)(CountUI)

//引入connect方法连接热闹组件
import { connect } from "react-redux";
//引入actions
import { increment, decrement } from "../../store/actions/count";
const CountUI = (props) => {
   //props里面就包含了store传递过来的状态和修改状态的方法
  const increment = () => {
    props.increment(1);
  };

  const decrement = () => {
    props.decrement(1);
  };

  return (
    <div>
      <div>Current count is: {props.count}</div>
      <div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
      </div>
    </div>
  );
};

/* 
	1.mapStateToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapStateToProps用于传递状态
*/
//这里声明该组件需要拿到store里面的count属性的属性值，并且通过props传递给UI组件（key为count）
const mapStateToProps = (state) => ({ count: state.count });

/* 
	1.mapDispatchToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapDispatchToProps用于传递操作状态的方法
*/
//这里声明该组件需要两个操作状态的方法increment和decrement
const mapDispatchToProps = (dispatch) => ({
  increment: (data) => dispatch(increment(data)),
  decrement: (data) => dispatch(decrement(data))
});

/*
简写mapDispatchToProps, 
const mapDispatchToProps{
  increment: increment,
  decrement: decrement
}
*/

export default connect(mapStateToProps, mapDispatchToProps)(CountUI);

去掉index.js里面的store.subscribe监听

之前用redux做我状态管理，没有用react-redux时，状态的更新不会触发页面的更新，因此我们在入口文件index.js里面调用的store.subscribe方法监听store里面状态的变化去刷新页面，但现在用了react-redux之后就不必再继续监听了，react内部做了处理，因此我们可以直接移除掉。

扩展：合并reducer

之前的demo都只在一个数据处理逻辑下（Counter），但是实际项目开发中我们几乎不可能一个项目就一个模块，不同的模块一般都会创建不同的数据处理reducer，因此在创建store的时候，createStore方法的第一个参数没法传递多个reducer，这时候就需要使用redux暴露的方法combineReducers将各个reducer合并为一个，然后再创建store。