redux

学习redux的目的是react 组件的state传递繁琐，子组件修改父组件的state ，需要在父组件定义一个方法，修改state,将方法传递给子组件并调用，项目大点就会非常复杂， 容易出错，不好维护。而redux就是专门用于管理state

redux 三个部分:action , store,reducer

redux使用我总结就两方面，读和写,后面具体阐述
简单概括**:读——》store.getState()
写——》创建action——》reducer接受并处理——》订阅修改state**

1、安装

npm install redux -S

2、配置文件
在src目录下，创建store目录，在store目录下创建index.jsx 与 reducer.jsx
index文件是读的文件
reducer文件是写的文件,返回值返回给index

index.jsx文件内容

import {createStore} from 'redux'
import reducer from './reducer.jsx'

const store = createStore(reducer)
export default store

reducer.jsx文件内容

const defaultState = {
    value:"hello world",
    datalist:['1','2','3']
}

export default (state = defaultState,action)=>{
    return state
}

3、读和写
读
读只需一步

import store from './store/index.jsx'
data = store.getState()

写
写需要三步
1、在事件回调函数中设置action,将action发送到store中，数据会自动转入reducer中
2、在reducer中接受并处理action的数据
3、在需要展示的页面订阅

回调函数

changeInput = (e)=>{
        const action = {
            type:"changeinput",
            value:e.target.value,
        }
        store.dispatch(action)
    }

reducer接受并处理数据

export default (state = defaultState,action)=>{
    if(action.type==="changeinput"){
        let newstate = JSON.parse(JSON.stringify(action))
        newstate.value = action.value
        return newstate
    }
    return state
}

在需要展示数据的组件中订阅
目的更新state,刷新页面

constructor(){
        super()
        store.subscribe(this.storeChange)
    }
storeChange = ()=>{
        this.setState(store.getState())
    }