Redux 仓库 & setState

redux

https://github.com/reduxjs/redux

https://redux.js.org/introduction/core-concepts

组件通信数据

• 父传子(props)
• 兄弟通信（redux/vuex）平行组件之间的通信

State（存放数据的地方）通信的数据都会存放在这里
Getter (获取需要通信的数据)
Mutation （修改交换的数据）
Action  （触发Mutation）
Module  （分开多个State仓库）

安装

安装redux的两个必须模块

cnpm install redux --save
cnpm install react-redux --save

创建仓库

index.js文件内创建仓库，创建一个仓库，最终目的就是要生成一个store仓库，该仓库有一个state存放数据
还有一个action来触发state的更改

import { createStore } from 'redux'
import { Provider } from 'react-redux'

const store = createStore((state = {
    img_show: false,
    name: 'Lmone'
}, action) => {
    switch (action.type) {
        case 'up_img':
            return {
                ...state,
                img_show : action.upd_img_show
            }
        case 'upd_name':
            return {
                ...state,
                name : action.upd_name_1
            }
        default:
            return state
    }
})

//与react进行关联,把<Provider>注入到根组件里面，把<Router>和<App />组件包含起来，把刚才上面生成的store注入到<Provider store={store}>组件里面，这个时候，整个app的都可以redux的状态管理
ReactDOM.render(
    <Provider store={store}>
        <Router>
            <App />
        </Router>
    </Provider>
, document.getElementById('root'));

connect

把组件（Xnav.jsx）和store进行一次关联。如果没有connect，这个仓库是没有任何人能访问的

import React, { Component } from 'react';
import { connect } from 'react-redux';

let Xnav = class Xnav extends Component {
     constructor(props) {
        super(props);
    }
    render(){
        return(
            <div>{this.props.name}</div>  //获取仓库的name值
            <button onClick={this.props.set_img.bind(this, true)}>   //点击修改仓库的值
            	点我有惊喜
            </button>
        )
    }
} 

// 该组件如果想跟store进行连接就在导出的时候用
export default connect((state) => {
    // 第一个函数把store里面的值注入到Wnav组件的`props`上面
    // 第一个函数是获取store的值
    // 和store的state产生关系
    return state
}, (dispatch) => {
    // 第二个函数是触发store的值改变
    // 相当于vue（action，commit->mutation）
    // 你可以在此处定义多个函数，来去触发store里面的`dispatch`,从而改变`store`里面的值
    // 和store的action产生关系
    return {
        set_img: (ox) => {
            dispatch({
                type:'up_img',
                upd_img_show : ox
            })
        }
        set_name: () => {
            dispatch({
                type:'upd_name',
                upd_name_1 : 'apple'
            })
        }
    }
})(Xnav);

对应关系

dispatch 中的 type——>action 中的 action.type