redux配合react的简单使用

简介

javascript状态容器，提供可预测化的状态管理。（类似于vuex）

redux的工作流程

store 是数据的存放地，组件从store中获取数据
action 存放着组件(view)对数据(data)的操作
reducer 根据传来的action的类型来更新state

流程详解

1. 用户操作视图数据发出action

   store.dispatch(action)

2. store自动调用reducer，并传入两个参数state和action。reducer根据action返回新的state

   (state=defaultState,action)=>{ if(action.type===’…’){ return newState}… }

3. state发生变化，store调用监听函数

   store.subscribe(listener)

4. listener可以通过store.getState()得到当前状态，重新渲染页面

   function(){
   let newState = store.getState()
   component.setState(newState)
   }

   三大原则

5. 单一数据源
   整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

6. state是只读的
   唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

7. 使用纯函数来执行修改
   为了描述 action 如何改变 state tree ，需要编写 reducers。它接收先前的 state 和 action，并返回新的 state。

   安装

   npm i redux –save

   使用

   一般会创建一个单独的文件夹来存放这些数据

   src
    └── store
          ├── index.js
          ├── reducer.js
          └── actions.js

   index (state)

   /*
   createStore()：
   创建一个store来存放所有的state
   应用中有且仅有一个store
   参数
   1：reducer(Function)
   2：[preloadeState](any): 初始的state
   3：enhancer(Function): 强化的store creator ？？
   */
   import { createStore } from 'redux' // 引入方法
   import reducer from './reducer'     // 引入reducer
   const store = createStore(          // 创建存储仓库
       reducer, 
       window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
   )
   export default store        // 把创建好的数据仓库暴露出去

在组件中获取数据

import store from './store';
...
class App extends Component {
    constructor(props){
        super(props)
        this.state = store.getState()   //获取state
  }
}
export default App;

actions

// actions.js
export function addAction = ()=> ({
    type: 'add'
})
export function changeInputAction = (value)=>({
    type: 'changeInput',
    value
})

在组件内使用action

import {changeInputAction,addAction} from './store/actions'

class App extends Component {
  // 触发事件就会触发action
  changeInputValue(e){
    const action = changeInputAction(e.target.value)
    store.dispatch(action)  // 更新state
  }
  add(){
    const action = addAction()
    store.dispatch(action)
  }
  storeChange(){
    this.setState(store.getState())
  }
}

export default App;

reducer

它没有直接改变state的数据，而是返回新的对象

// 创建初始的state数据
const defaultState = {
    list:['hehe','enen'],
    inputValue:'write somthing'
}
export default (state=defaultState,action)=>{
    if(action.type==='changeInput'){
        let newState = JSON.parse(JSON.stringify(state))    // 深拷贝
        newState.inputValue = action.value  // 更新数据
        return newState // 返回新的state
    }
    if(action.type==='add'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    return state
}

// 官方文档给出的代码段 是用switch-case进行对action类型的判断，assign进行拷贝和更新：
function todoApp(state = defaultState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    case ADD_TODO:
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })
    default:
      return state
  }
}

参考

redux中文文档
技术胖博客