1.先创建count和person两个组件
2.创建count的store相关的文件夹。
store/modules/count
1.constant.js
2.createActions.js
3.index.js
4.reducer.js

index.js

import { legacy_createStore as createStore } from "redux";

import countReducer from "./reducer.js";

const countStore = createStore(countReducer);

export default countStore;

先写index.js 创建store，因为以后count组件的操作都是store.dospatch({type:xxx,data:xxx}),然后获取store是通过store.getState()
然后创建reducer.js

import { INCREMENT, DECREMENT } from "./constant";
const initialState = 0;
function countReducer(preState = initialState, action) {
  const { type, data } = action;
  console.log("count reducer", type, data);
  switch (type) {
    case INCREMENT:
      return preState + data;

    case DECREMENT:
      return preState - data;

    default:
      return preState;
  }
}

export default countReducer;

创建createActions.js

import { INCREMENT, DECREMENT, ASYNC_INCREMENT } from "./constant";
export function incrementAction(data) {
  return { type: INCREMENT, data };
}
export function decrementAction(data) {
  return { type: DECREMENT, data };
}

export function asyncIncrementAction(data) {
  setTimeout(() => {
    return { type: ASYNC_INCREMENT, data };
  }, 1000);
}

constant.js

export const INCREMENT = "increment";
export const DECREMENT = "decrement";
export const ASYNC_INCREMENT = "asyncIncrement";

这个时候在count组件中通过store.getState()就可以获得值了，但是注意，页面是不会刷新的，所以我们要使用另外一个方法store.subscribe这个方法，当rudux里面的值发生改变，就会调用这个方法，执行里面的回调函数。

import React, { Component } from "react";
import store from "../store/modules/count";
import {
  incrementAction,
  decrementAction,
  asyncIncrementAction,
} from "../store/modules/count/createActions";
export default class Count extends Component {
  state = { count: store.getState() };
  componentDidMount() {
    store.subscribe(() => {
      const count = store.getState();
      this.setState({ count });
    });
  }

  increment = () => {
    console.log(store.getState());
    store.dispatch(incrementAction(1));
  };
  decrement = () => {
    store.dispatch(decrementAction(1));
  };
  asyncIncrement = () => {
    store.dispatch(asyncIncrementAction(1));
  };
  render() {
    return (
      <div>
        <div>当前Count:{store.getState()}</div>
        <button onClick={this.increment}>点我加1</button>
        <button onClick={this.decrement}>点我减1</button>
        <button onClick={this.asyncIncrement}>点我异步加1</button>
        <hr />
      </div>
    );
  }
}

1.总结

使用redux的时候，
记住两点，redux里面是数据
组件中要使用store.dispacth(atction)来变更redux中的数据
组件通过store.getState()来获取里面的数据。
实现的化，只考虑store.js和reducer.js
store.js的创建就是公式。

import { legacy_createStore as createStore } from "redux";

import countReducer from "./reducer.js";

const countStore = createStore(countReducer);

export default countStore;

reducer.js就是一个纯函数，function countReducer(preState = initialState, action)

这个样子，基本reudx的使用就没问题了。

接下来还有异步的处理。
组件的store的dispatch里面只能是一个action，你dispatch里面是一个函数的化，是会报错的，这个时候，你需要让store执行这个函数，就需要用中间件。
下载redux-thunk

import { legacy_createStore as createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import countReducer from "./reducer.js";

const countStore = createStore(countReducer, applyMiddleware(thunk));

export default countStore;

给store.js使用中间件，这样子sotre.dispatch(fn)就没问题了，fn是一个异步函数。store收到这个函数，就会马上执行。并且会传入dispatch这个参数。
最终还是会dispatch一个action。store遇到这个action，就会调用reducer这个函数，传入当前的state和这个action。

export function asyncIncrementAction(data) {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(incrementAction(data));
    }, 1000);
  };
}

总结2

一个组件对应一个store.js，一个store.js对应于一个reducer.js
如果有多个组件的化，我们就要创建很多的store和reducer。
这个时候可以使用react-redux。
react-redux是react团队facebook参照redux，自己做了一层封装。