Redux基本使用（一）

Redux基础

一、设计思想：react是单项数据流框架，为了在相对较大的项目中方便进行状态管理。

二、基本概念：

1.Store：保存数据并且是改变state的地方，用createStore来进行创建。（整个应用只能有一个）

import {createStore} from 'redux';
//createStore函数用来接收reducer函数作为参数，返回一个新的Store对象
const store = createStore(reducer)
export default store

2.Reducer纯函数：

（1）储存默认数据（用defaultState）；

const defaultState ={//默认数据
    inputValue:'请输入内容',
    list:[
        'react','redux','react-dom'
    ]
} 

（2）接收action。

//Reducer收到action对象后，必须给出一个新的state传递到Store中进行更新，这样view才会发生变化。这种state的计算过程就叫做reducer
//reducer是一个函数，接收当前state和action作为参数。
function reducer(state = defaultState,action){
if(action.type===CHANGE_INPUT){
        let newState  = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState  
    }
    if(action.type===ADD_ITEM){
        let newState  = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    if(action.type===DELETE_ITEM){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index,1)
        return newState
    }
    // console.log(state,action)
    return state
}

3. store.getState()拿到当前state

this.state = store.getState()，这里对于state的改变用setState。

4.action对象：state变化能导致view发生变化，同样view的变化也会导致state发生变化，用只能户接触到view，action就是用户通过视图层发出的通知，以此来让state发生变化。

（以其中某一个函数为例）

changeInputValue(e){
        // console.log(e.target.value);
        const action = {
            type:CHANGE_INPUT,
            value:e.target.value
        }
        store.dispatch(action)
    }

5.store.dispatch函数：根据上面代码也能猜到，action想要传到reducer使用这个函数才是唯一的方法。

6.store.subscribe函数用于订阅redux的状态。

//通过函数进行绑定
store.subscribe(this.storeChange)//订阅redux状态

内容参考技术胖老师文章