浅谈在react怎么使用redux

redux作为react的状态管理工具深受前端工作者的喜爱，作为react的状态管理工具，他不像vuex那样在创建项目时可以自动生成，需要手动安装，且也不像vuex那样简单易懂，需要对react有一定的了解。
为什么要是用redux？
React有props和state: props意味着父级分发下来的属性，state意味着组件内部可以自行管理的状态，并且整个React没有数据向上回溯的能力，也就是说数据只能单向向下分发，或者自行内部消化。单个组件内部传值还好，一但涉及多个组件之间的交互，就会变得非常麻烦。解决这个问题的办法就是提升state，将state放到共有的父组件去管理，再作为props分发回子组件。 为了有更好的state管理，就需要一个库来作为更专业的顶层state分发给所有React应用，这就是Redux。
理解这个是理解React和Redux的前提。

在Redux中有三个核心的概念:store、reducer、action。

它的工作原理也是基于这几个概念来进行的例如下面这张图：

store，把它想象成一个物流仓库中心，数据就是一个个包裹，为了便于对包裹的管理，需要给它们进行包装，比如打上标签，标明这是联邦快递，还是申通快递，你是要寄快递还是退快递，要发到江浙沪，还是发到偏远地带…那对于一个新来的包裹，首先要做的第一步就是包装，这一步由action完成，第二步，应该是根据他的标签做针对性的处理，圆通的快递员处理圆通快递，申通的快递员处理申通的快递，这一步，由reducer完成，他根据action.type做针对性的处理。如果我想向物流仓库中心发一个快递，就通过store的dispatch方法，先给包裹包装，然后丢到物流中心由一个个快递员(reducer)进行处理。它们之间通过什么去联系呢，答案是connect。

Redux 可以用这三个基本原则

单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

State 是只读的

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。

就是这样，现在你应该明白 Redux 是怎么回事了。接下来通过一个计数器的代码例子来简单的展示一下redux在react中的应用。
首先打开命令行，输入 npm i redux --save 进行安装。

1.穿件一个provider组件来包裹根组件

import React, { Component,createContext } from 'react'

let context = createContext()
let {Provider,Consumer} = context
 class MyProvider extends Component {
    render() {
        return (
            <div>
                <Provider value={{a:1,b:2,c:3}}>
                    {this.props.children} {/*  就是App 组件一定要渲染 */}
                </Provider>
            </div>
        )
    }
}
export {MyProvider,Consumer,context}

2.包裹根组件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './store'
import {MyProvider} from "./components/myprovider";
ReactDOM.render(
      <MyProvider>
        <App />
      </MyProvider>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

store

import {createStore} from 'redux'   //导入创建store的方法
import reducer from '路径'		// d导入后续创建的reducer
let store =createStore(reducer)
export default store

reducer

const initialState = {
    first:1,
    second:2,
    third:3
}

export default (state = initialState, action) => {
    switch (action.type) {
    case 'INCREMENT':
         var newState ={...state};
         if(action.p<0){  //-1的情况
             if(newState[action.name]>1){
                newState[action.name]+=action.p;
                return newState; 
             } 
         }
         else{  //+1的情况
               newState[action.name]+=action.p
               return newState;
         }
    default:
        return state
    }
}

3.使用store中状态的组件中通过引入先前我们创建的store，并通过store.getState() 的方法读取并渲染到页面上:

import React, { Component } from 'react'
import store from '../../store'
import actionCreator from './actionCreator'
class  Counter extends Component {
   
    render(){
        let {change,n} = this.props;
      return  (
            <div>
                <button onClick={change.bind(this,-1)}>-</button> 
                {n}
                <button onClick={change.bind(this,1)}>+</button>
            </div>
        )
    }
}
 class CounterContainer extends Component {
    constructor(props){
        super(props);
        this.state ={
            n:store.getState()[props.name]  // 获取store中的数据
        }
        //store 里面数据变了就会执行回调
        store.subscribe(this.subscribe.bind(this))  //订阅store中的数据变化，一旦store中的数据变化就会执行
    }
    subscribe(){
            this.setState({
                n:store.getState()[this.props.name]
            })
    }
    change=(p)=>{
        store.dispatch(actionCreator.incAction(this.props.name,p));
    }
    render() {
        return (
            <div>
                <Counter n={this.state.n} change={this.change} />
            </div>
        )
    }
}

export default CounterContainer

4.这里我们就完成了在React中使用Redux实现计数器的简单功能