Redux

redux.png

关于redux

redux特征

Single Source of Truth
(State + action) => newstate 可预测性
纯函数更新Store

state一个数据对象
action一个描述变更state的对象
reducer函数，数学理解为约归，这个函数的作用就是(State + action) => newstate

state发生任何变化一定是由一个action引起的，如果发现state出了问题，一定可以发现对应的action是什么，很容易去定位问题

理解Store

通过发布订阅模式进行数据管理，通过getState()获取state。

通过dispatch(action) + oldState使用reducer函数返回newState
listener（通常是render()函数）订阅state的变化，发现变化后执行listener（重新render页面）

getState()
dispatch(action)
subscribe(listener)

combinReducers

如果有多个reducer函数，将它们返回的state合并后放在在一个store里，有自己的节点，使用方法见下例

bindActionCreators

Action Creator函数生成action，该方法将生成的action和store.dispacth方法装饰为新的函数，使用见下例

一个简单例子

一个简单的例子，在原生JavaScript中使用redux，来更好的理解redux

//在createStore时会dispach一次初始化store
  
  //reducer1
  function stateChange(state, action){
    if( state === undefined){
      return 0
    }
    switch(action.type){
      case 'ADD':
        return state + action.payload
      case 'MINUS':
        return state - 1
      default:
        return state
    }
  }
  //reducer2
  const todos = (state = {}) => state
  
  //Creat store
  const store = Redux.createStore(
    //combinReducers的用法，生成两个节点
    Redux.combineReducers({ 
      stateChange,
      todos
    })
  )

  function add1(){
    store.dispatch({type: 'ADD', payload:1 })
  }

  //ActionCreator 结合bindActionCreators的用法
    //add2 和 add1 是一样的效果
  function add2(){
    return {type: 'ADD',payload: 2}
  }
 add2 = Redux.bindActionCreators(add2, store.dispatch)


  function minus1(){
    store.dispatch({ type: 'MINUS'})
  }
  function addIfOdd(){
    if(store.getState() % 2 !== 0){
      store.dispatch({type: 'ADD', payload: 1})
    }
  }
  function delay2sAdd(){
    setTimeout(()=>{
      store.dispatch({type:'ADD', payload: 1})
    },2000)
  }
  
  function render(store){
  let app = document.querySelector('#app')
  app.innerHTML = `
    <div>
      <div>Clicked:${store.getState().stateChange}<div>
      <div>
        <button id="add1" onclick="add1()">+1</button>
        <button id="add2" onclick="add2()">+2</button>
        <button id="minus1" onclick="minus1()">-1</button>
        <button onclick="addIfOdd()">如果是单数就+1</button>
        <button onclick="delay2sAdd()">延迟两秒后+1</button>
      </div>
    </div>
  `
}

render(store)//render页面

store.subscribe(()=>{
  render(store) //listener函数订阅state变化，重新渲染页面
})

react-redux

如果我们像在原生JavaScript里使用redux，就需要在根组件将state和触发action的函数通过props一层一层的传递下去，这样使用状态管理显然不方便，所以诞生了react-redux

常用API

Provider()
connect()
- mapStateToProps()
- mapDispatchToProps()

一般流程

创建reducer
合并reducers
createStore
Provider
connect(mapStatetoProps, mapDispatchToProps)(App)

例子

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';import App from './App';
import {createStore} from 'redux'
import { Provider } from 'react-redux'

const initialState = { n: 0}
function reducer(state = initialState, action){
  switch(action.type){
    case 'ADD':
      return {n: state.n + action.payload}
    case 'MINUS':
      return {n:state.n - 1}
    default:
      return state
  }
}
const store = createStore(reducer)

ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root'));
// const render = () =>{
//   ReactDOM.render(<App 
//     value={store.getState()}
//     onAdd1={()=>{store.dispatch({type: 'ADD', payload: 1 })}}
//   />, document.getElementById('root'));
// }

// render()
// store.subscribe(()=>{
//   render()
// })

App.js

import React from 'react';
import {bindActionCreators} from 'redux'
import { connect } from 'react-redux'


function App(props) {
  return (
    <div>
      <div>Clicked:<span>{props.count}</span></div>
      <div>
        <button onClick={props.add1}>+1</button>
        <button onClick={props.add2}>+2</button>
        <button onClick={props.minus}>-1</button>
      </div>
    </div>
  );
}

function add1(){
  return {type: 'ADD',payload: 1}
}
function add2(){
  return {type: 'ADD', payload: 2}
}
function minus(){
  return {type: 'MINUS'}
}

const mapStateToProps = (state) => {
  return { count: state.n } //这里考虑性能问题，将能访问的节点限制到最小的范围
}
const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({add1, add2, minus},dispatch)
    // add1: () =>{dispatch({type:'ADD',payload:1 })},
    // add2: () => {dispatch({type:'ADD', payload: 2 })},
    // minus: () =>{dispatch({type:'MINUS'})}
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

异步Action & middleware

异步action.png

我们在使用connect调用Action creator函数的时候，同步的action会被自动添加上dispatch，异步的action被当作返回一个undefined。

如何解决：

异步actionCreator => middleware处理生成新的action => 手动dispatch => reducer

redux-thunk

这时要让actionCreator返回一个方法，该方法的参数是dispatch，该方法里可以进行一些异步的操作或条件判断后，回调进行手动的dispatch一个同步的action。
middleware将判断actionCreator返回的是一个函数还是一个action

例子