1. 前言

相比于Vuex，Redux确实不容易那么使用，因为Vuex把所有东西都做到一起了，而Redux还需要你自己来弄！

2. 安装

需要的库：redux、react-redux、redux-thunk（异步）

yarn add redux react-redux redux-thunk

3. 步骤

1、创建store

这个store就是全局的状态管理

import {createStore, applyMiddleware} from 'redux'
import {finalReducer} from "../redux/reducers/index"
import thunk from 'redux-thunk'

export default createStore(finalReducer, applyMiddleware(thunk));

2、创建reducers

这个src\redux\reducers就是一个个的“管理”store的'管理者'，它的作用：初始化数据、对数据进行操作

count_reducer

let initState = 0;

export default function operateCount(preState = initState, action) {
    let {type, data} = action;
    let newState;
    switch (type) {
        case 'increment':
            newState = preState + data;
            return newState
        case 'decrement':
            newState = preState - data;
            return newState
        default:
            return initState;
    }
}

index.js

import {combineReducers} from "redux"
import countReducers from "./count_reducers";

export const finalReducer = combineReducers({
    countReducers
})

index.js就是引入所有的reducer，然后结合到一起（combineReducers）

3、Action

export const incrementAction = value => {
    return {type: 'increment', data: value};
}
export const decrementAction = value => {
    return {type: 'decrement', data: value};
};

export const incrementAsyncAction = value => {
    return dispatch => {
        setTimeout(() => {
            dispatch(incrementAction(value))
        }, 1200);
    }
}

如何理解Action呢？其实他就是返回的一个个对象，如：{type: 'increment', data: value};

具体有什么用？方便修改嘛，因为以后要多出使用到

那这些对象是什么？一个类型（type），一个载荷（data）：

通过类型判断要进行哪种操作，载荷就是进行操作的数据（增加？删除？修改？）

4、Container

import {connect} from "react-redux";
import Count from "../components/Count";
import {incrementAction, decrementAction, incrementAsyncAction} from '../redux/actions/count_action';


export default connect(
    state => ({...state})
    ,
    dispatch => ({
        increment: value => dispatch(incrementAction(value)),
        decrement: value => dispatch(decrementAction(value)),
        incrementAsyncAction: value => dispatch(incrementAsyncAction(value)),
    })
)(Count)

容器，如何理解这个？ 将组件再包装一层，如上面的代码是把Count组件包装了一层，有什么用呢？

说白了：

1、就是把store的数据(state)封装到组件的props上

2、把增删改查的方法(dispatch)封装到组件的props上

这样，你在Count组件就可以直接通过this.props.xxx获取数据或调用方法！

当然，一般情况下，你操作数据了react并不会刷新视图层（因为你不是亲儿子？你不是组件内的state），那么该如何做？

import React from "react";
import CountContainer from "../containers/count_container";
import {Provider} from "react-redux";
import store from "../redux/store";

function App() {
    return (
        <Provider store={store}>
            <CountContainer/>
        </Provider>
    );
}

export default App;

react-redux中有一个Provider组件，让他包裹Container就行，然后把store传递给Provider

以上就是大致流程，也大致讲了其所以然