状态管理（1）- Redux

应用的整体全局状态以对象树的方式存放于单个store。唯一改变状态树（state tree）的方法是创建action， 一个描述发生了什么的对象，并将其dispatch给store。要指定状态树如何响应action来进行更新，你可以编写reducer函数，这些函数根据旧的action来计算新state。

上面这段摘抄自官网，个人认为是比较通俗的概括了redux的使用方法，你或许还没有很理解它，继续往下看，相信你会有所收获

react 中使用redux

一个简单的例子，带你熟悉redux

image.png

‘默认值’ 存在state里，我们点击按钮之后，改变改值

image.png

使用脚手架创建应用，安装依赖

npx create-react-app redux-demo

安装redux

# NPM
npm install redux

# Yarn
yarn add redux

编写ui

//App.js
import React from "react";
import Home from "./page/home";
function App() {
  return (
    

      
   
  );
}
export default App;

添加home组件

// src/page/home/index.js
import React from "react";
export default class Home extends React.Component {
  render() {
    return (
      <>
        改变默认值
        
默认值
      
    );
  }
}

创建action：
在根目录下创建action文件夹，在action文件下创建index.js
这里我们定义一个action的构建函数，让他返回action对象

// 这是action的构建函数
const sendAction = () => {
  // 返回一个action的对象
  return {
    type: "send_type",
    value: "我是一个action",
  };
};
export default sendAction;

action可以理解为表示即将放生的变化类别，它是一个普通的对象，必须包含type属性，这里我们添加我们需要的value属性，作为传递的数据

创建Reducer：
在根目录下新建reducer文件夹，在reducer文件夹下新建index.js 文件
本质就是函数，用于响应发送过来的action，函数接受两个参数，第一个是初始化state，第二个是发送过来的action
这里我们将默认的state也放到reducer 文件中Object.assign({},state,action);
如果action的type为send_type 则返回， 不要忘记将reducer暴露出去

const initState = {
    value: '默认值'
}
const reducer = (state = initState, action) => {
    switch(action.type) {
        case 'send_type':
            return Object.assign({},state,action);
        default:
            return state;
    }
}
export default reducer;

创建store
store是用来把action和reducer关联到一起的， 我们通过createStore来构建store，通过subscribe来注册监，通过dispatch来发送action。
store.dispatch() 并传入一个action对象，store将执行所有reducer函数并计算出更新后的state，调用getState()可以获取新state
dispatch一个action可以形象的理解为“出发一个事件”，发生了一些事情，我们希望store知道这件事。Reducer就像事件监听器一样，当它们收到关注的action后，它就会更新state作为响应

这里是最难理解的地方，你可以认为store的dispatch方法才是最终告知要执行action的动作了，你这个动作具体做了什么需要reducer来处理

根目录下创建store文件夹，在store文件夹下创建index.js
同样的将store暴露出去

import { createStore } from "redux";
// 导入我们自己创建的reducer
import  reducer  from "../reducer"
// 构建 store
const store = createStore(reducer);
export default store;

action、reducer、store 都写好了，现在我们将这个redux用到组件中
我们通过store的subscribe来注册监，通过dispatch来发送action
组件一加载完成就注册监听
Home组件

import React from "react";
import store from "../../store";
import sendAction from "../../action";
export default class Home extends React.Component {
  handleClick = () => {
    const action = sendAction();
   // 触发action
    store.dispatch(action);
  };
  componentDidMount() {
    // subscribe 监听
    store.subscribe(() => {
      this.setState({});
    });
  }
  render() {
    return (
      <>
        改变默认值
        
{store.getState().value}
      
    );
  }
}

store.getState()获取当前state