11.redux的简单使用

redux 的使用

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

1.安装redux

yarn add redux

2.创建store

整个应用只能有一个store
store/index.js

import { createStore } from 'redux';
const store = createStore(reducer);
export default store;

3.创建reducer

reducer必须是一个纯函数

1. 固定的输入必须有固定的输出，不能有不纯粹的操作(如Data.now() Math.randonm()等)
2. 不能对之前的状态进行任何的更改
3. redux中遵循状态与视图一一对应的原则，状态不变视图也不变

store/reducer

let todos ={  // todos存储了共享数据
  list: [
      {
        id:1,
        title:"今天，周六，被面试题"
      },
      {
        id:2,
        title:"早起洗衣服，然后吃早饭"
      }
  ]
}
const reducer =(prevState=todos,action)=>{
  let newState = {...prevState} // 不能更改之前的状态，只能拷贝为新的状态进行更改，然后返回新的状态
  return newState
}
export default reducer

4.获取redux的状态，并渲染到dom

store.getState() 获取状态

import store from “…/…/store”

将获取到的状态存储到当前组件的状态中

state = {
    todos:[]
  }

  componentDidMount(){
    // console.log(store.getState())
    this.setState({
      todos:store.getState().todos
    })
    
  }

5. 更改redux的状态

想要更改状态，需要ActionCreators中定义action，然后将action通过store.dispatch(action)传递给Store，store在传给reducer，reducer通过纯函数的第二个参数接受到action，判断action的标记，根据标记执行不同的操作，获取到对应的新的状态。

如下，想要进行新的数据的添加

在store/actionCreators文件中

import store from "./index"
export default{
  addNewTodo(title){
    // 这个是actionCreators，作用是用来创建action
    // action是一个具有标志性信息的对象
    let action = { 
      type:"addNewTodo", //需要有标志信息
      title
    }
    store.dispatch(action) // 将具有标志性信息的action对象通过dispatch方法传递给reducer。
  }
}

在store/reducer文件中
通过reduce人纯函数的第二个参数获取到传递来的action,根据传递来的具有标志性信息的action做出判断，根据标志决定做什么事。

const reducer =(prevState=todos,action /* 通过action获取到了actionCreators传递来的action */)=>{
   
  let newState = {
   ...prevState}
  switch(action.type)