react-redux

1 .安装redux

 npm install --save redux

2 .在store中新建index.js和reducer.js

• index.js

import { createStore } from 'redux'  //  引入createStore方法
import reducer from './reducer'    
const store = createStore(reducer) // 创建数据存储仓库
export default store   //暴露出去   

• reducer.js

const defaultState = {}  //默认数据
export default (state = defaultState,action)=>{  //就是一个方法函数
    return state
}

3.初始话store的数据

• 在reducer.js中更改

 const defaultState = {
    inputValue : 'Write Something',
    list:[
        '早上4点起床，锻炼身体',
        '中午下班游泳一小时'
    ]
}
export default (state = defaultState,action)=>{
    return state
}

4 .组件中获取store中的数据

• 先引入

 import store from './store'

• 看下打印结果,store.getState就是了
  这时候数据还不能在UI层让组件直接使用，我们可以直接复制给组件的state，

 constructor(props){
    super(props)
    console.log(store.getState())
    this.state=store.getState();
}

5.更改store

• 使用input更改值

 <input onChange={this.changeInputValue}

• 绑定

 constructor(props){
    super(props)
    this.state=store.getState();
    this.changeInputValue= this.changeInputValue.bind(this)
}

• 编写函数,想要更改state，就是需要创建Action,他是一个对象，有两个属性，第一个是对Action的描述，第二个是要改变的值，通过dispatch（）传递个store

 changeInputValue(e){
    console.log(e.target.value)
    const action ={
        type:'change_input_value',
        value:e.target.value
    }
    store.dispatch(action)
}

6 .在store中接收

前面的课程说了store只是一个仓库，不具备管理能力，他会把接收到action自动转发给reducer，我们在reducer.js打印一下，看下结果

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

• state: 指的是原始仓库里的状态。
• action: 指的是action新传递的状态。

-通过打印你可以知道，Reducer已经拿到了原来的数据和新传递过来的数据，现在要作的就是改变store里的值。我们先判断type是不是正确的，如果正确，我们需要从新声明一个变量newState。（记住：Reducer里只能接收state，不能改变state。）,所以我们声明了一个新变量，然后再次用return返回回去。

Reducer.js

 export default (state = defaultState,action)=>{
    if(action.type === 'changeInput'){
        let newState = JSON.parse(JSON.stringify(state)) //深度拷贝state
        newState.inputValue = action.value
        return newState
    }
    return state
}

7.让组件发生变化

在组件中写入

  constructor(props){
    super(props)
    this.state=store.getState();
    this.changeInputValue= this.changeInputValue.bind(this)
    //----------关键代码-----------start
    this.storeChange = this.storeChange.bind(this)  //转变this指向
    store.subscribe(this.storeChange) //订阅Redux的状态
    //----------关键代码-----------end
}

• 当然我们现在还没有这个storeChange方法，只要写一下这个方法，并且重新setState一次就可以实现组件也是变化的。在代码的最下方，编写storeChange方法。

  storeChange(){
     this.setState(store.getState())
 }

8. 更改store文件结构，让结构更加明确

• 1 .可以把action type单独拆成一个文件actionTypes.js文件

 export const  CHANGE_INPUT = 'changeInput'

• 2. 写好了ationType.js文件，可以引入到TodoList.js组件当中，引入代码如下：

 import { CHANGE_INPUT  } from './store/actionTypes'

• 3. 可以在下面的代码中代替他们

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

• 4. 在引入Reducer.js

 import {CHANGE_INPUT} from './actionTypes'
const defaultState = {
    inputValue : 'Write Something',
    list:[
        '早上4点起床，锻炼身体',
        '中午下班游泳一小时'
    ]
}
export default (state = defaultState,action)=>{
    if(action.type === CHANGE_INPUT){
        let newState = JSON.parse(JSON.stringify(state)) //深度拷贝state
        newState.inputValue = action.value
        return newState
    }
  
    return state
}

9.继续优化

• 在新建一个actionCreate.js文件，将那个type文件引入

 import {CHANGE_INPUT}  from './actionTypes'
// 再写上
export const changeInputAction = (value)=>({
    type:CHANGE_INPUT,
    value
})

• 那样就可以直接组件中引入的type那个文件取代了，变成引入这个actionCreate.js文件

import {changeInputAction} from './store/actionCreatores'

那那个方法也就可以变为

 changeInputValue(e){
        const action = changeInputAction(e.target.value)
        store.dispatch(action)
    }
// 这是最早的样子
//changeInputValue(e){
//   console.log(e.target.value)
//    const action ={
//        type:'change_input_value',
//        value:e.target.value
//    }
//   store.dispatch(action)
}