react（51）——redux的初使用实现加法案例，store和reducer分别干了什么事，store的getState，dispatch，subscribe方法

1.安装redux依赖

1. 终端运行cnpm add redux
   

2.创建store.js文件和对象

//该文件专门用于暴露一个store对象，整个应用只有一个store

//从依赖中引入createStore
import { createStore } from "redux";

//引入为组件服务的reducer，作为createStore的参数
import pageReducer from "./page_reducer";

//暴露store
export default createStore(pageReducer);

3.创建reducer.js文件

//1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
//2.reducer函数会接到两个参数，分别为：之前的状态(preState),动作对象(action)

const initState = 0;
export default function pageReducer(preState = initState, action) {
	//preState = initState意思是当preState为undefined的时候，默认赋值initState
	
  //从action对象中获取：type，data
  const { type, data } = action;
  //根据type决定如何加工数据
  switch (type) {
    case "increment":
      return preState + data;
    case "decrement":
      return preState - data;
    default:
      return preState;
  }
}

4.组件

4.1 组件中的代码

import React, { Component } from "react";
//引入store，用于获取redux中保存状态
import store from "../redux/store";

export default class Page1 extends Component {
   componentDidMount() {
     store.subscribe(() => {
       this.setState({});
     });
   }

  //加法
  increment = () => {
    const { value } = this.selectNumber;
    store.dispatch({ type: "increment", data: value * 1 });
  };

  //减法
  decrement = () => {
    const { value } = this.selectNumber;
    store.dispatch({ type: "decrement", data: value * 1 });
  };

  //奇数再加
  incrementIfOdd = () => {
    const { value } = this.selectNumber;
    const count = store.getState();
    if (count % 2 !== 0) {
      store.dispatch({ type: "increment", data: value * 1 });
    }
  };

  //异步加
  incrementAsync = () => {
    const { value } = this.selectNumber;
    setTimeout(() => {
      store.dispatch({ type: "increment", data: value * 1 });
    }, 500);
  };

  render() {
    return (
      <div>
        <h1>当前求和为：{store.getState()}</h1>
        <select ref={(c) => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>&nbsp;
      </div>
    );
  }
}

4.2 组件代码讲解

1. store.getState()是获取store中的reducer加工后返回的数据；
2. store.dispatch({ type: "increment", data: value * 1 });是调用store中的reducer，并传给他action参数。
3. store.subscribe()的参数是一个回调函数，当store中的值发生改变的时候调用参数的回调函数。
4. this.setState({});必须要调用setState方法，才能让组件重新渲染，不然的话即使store中的值改变了，组件不重新渲染也看不出效果。
5. 为了避免每一个使用redux的组件都在component中调用store.subscribe()，可以将store.subscribe()放在index.js文件中，如下：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./redux/store";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

store.subscribe(() => {
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById("root")
  );
});

5.实现效果

6.简要总结

1. 组件将共享的数据就放在store中，不再存放在自己的state中，但是自己的state也可以有数据。
2. 与组件直接接触的只有store。
3. 组件中运用的store对象不是redux依赖中本来就有的，是通过依赖中的createStore方法根据reducer创建的。
4. reducer本质上只是一个函数，参数为preState和action，返回值为preState加工后的值。
5. 从redux依赖中import的就只有一个函数而已：import { createStore } from "redux";