redux 极简入门

redux是一个状态机，所有的状态都保存在一个对象里，

redux就是一个存数据，取数据和改数据的过程

我们先来看看存数据

1）数据是一个对象，所以我们要在src下创建一个redux，下面在创建state.js文件

let state = {

n : 5,

list : []

}

export default state;

2）第二步就是把数据放到reducer里，所以在redux下创建一个reducer.js文件，reducer是一个纯函数，第一个参数是为了接收数据，第二个是为了接收的通知，根据通知去修改数据，参数不能随便的去修改，这是纯函数的特点

import _state from "./state";

let reducer = ( state =_state, action) =>{

     //_state这个参数不能直接去修改,需要得到他的副本

     let newState = Object .assign({},state)

     //把state的数据给到空对象里

     return newState;

}

export default reducer;

3）第三步把reducer返回的数据放到store里面，store是存放数据的仓库，在redux下创建store.js文件，

import {createStore} from "redux"

import reducer from "./reducer";

//创建store并把reducer的数据拿过来,reducer负责拿数据改数据

let store = createStore(reducer);

export default store;

存完数据，接着我们就应该取数据，取数据我们需要用到一个方法getState()

class App extends Component {

constructor(props){

super(props)

this .state ={

v :store .getState() .n,

}

}

render() {

return (

< div className = "App">

< h1> { this .state .v }</ h1>

</ div>

);

}

}

这样我们就已经把存数据取数据完成了，接下来就是比较难的改数据

this可以绑定在标签里，也可以绑定在

在app.js中添加点击事件constructor，绑定在标签里每次点击都会请求，而绑定在constructor里只会请求一次，如果在bind里传参那就绑定在标签里

< button onClick = { this .add }>增加</ button>

在constructor添加

this .add = this .add .bind .bind( this);

接下来我们就该创建第四个文件了const.js，const.js这个是定义我们的一个类型，也可以说是一个通知，这个文件里就一行代码，定义并暴露出去，在这里，我们吧INC定义为做加法

export const INC = 'INC';

然后我们创建一个文件actionCreator.js这里我们把刚刚定义的INC接收过来,我们用type来改变一下这个数据

import {INC, DEC} from './const'

const actionCreator = {

     inc(){

         return {

             type : INC

        }

    },

}

export default actionCreator

接着我们创建actions.js，这个文件我们用来并不是改数据，是发出改数据的通知

import store from "./store";

import actionCreator from "./actionCreator"

let actions = {

     zj(){

         let act = actionCreator .inc();

        store .dispatch(act)

    },

}

export default actions;

我们通过store.dispatch(act) 把这个通知(type) 发送出去

接着我们在reducer里就可以做改变数据了

import _state from "./state";

let reducer = ( state =_state, action) =>{

     //_state这个参数不能直接去修改,需要得到他的副本

     let newState = Object .assign({},state)

     //把state的数据给到空对象里

     if(action .type === 'INC'){

        newState .n ++

    }

     return newState;

}

export default reducer;

action接收的就是type通知，如果接收的是INC那么我们就做一个加法运算

然后我们在app.js中把actions.js引入，在app.js中add方法调用actions,zj这个方法

add(){

actions .zj()

}

这样每点击一次按钮就能做一次加法运算，数据改变了，但是数据不更新，所以我们要订阅这个数据，我们在constructor中订阅

store .subscribe(() =>{

this .setState({

v :store .getState() .n,

})

})

这样我们就已经订阅好了，最后一步就是把它更新到页面上

< h1> { this .state .v }</ h1>

这样写完我们的redux和redux分层就都已经完成，接下来我们要好好想想这个流程，熟悉我们的redux