Redux详解（一）

• 所有数据的变化，必须通过派发（dispatch）action来更新;
• action是一个普通的JavaScript对象 ，用来描述这次 更新的type和content;

import * as actionsTypes from './constant'
 
const initialState = {
  counter: 10
}
 
function reducer(state = initialState, actions) {
  switch(actions.type) {
    case actionsTypes.ADD_NUMBER: 
      return {...state, counter: state.counter + actions.num}
    case actionsTypes.SUB_NUMBER: 
      return {...state, counter: state.counter - actions.num}
    default:
      return state
  }
}
 
export default reducer

5. Redux三大原则

单一数据源:

• 整个应用程序的state被存储在一颗object tree中，并且这个object tree只存储在一个 store 中;
• Redux 并没有强制让我们不能创建多个Store ，但是 那样做并不利于数据的维护;
• 单一的数据源 可以让整个应用程序的state变得 方便维护、追踪、修改;

State是只读的：

• 唯一修改State的方法一定是触发action，不要试图在其他地方通过任何的方式来修改State；
• 这样就确保了View或网络请求都 不能直接修改state ，它们只能 通过action来描述自己想要如何修改state；
• 可以 保证所有的修改都被集中化处理 ，并且 按照严格的顺序来执行 ，所以 不需要担心race condition（竟态）的问题；

6. Redux使用过程

1. 创建一个对象，作为我们要保存的状态;

2. 创建Store来存储这个state;

• 创建store时必须创建reducer;
• 可以通过 store.getState 来获取当前的state;

constant.js 定义type的常量

export const ADD_NUMBER = "add_number"
export const SUB_NUMBER = "sub_number"

createActions.js dispatch派发的actions， 返回一个对象

import * as actionsType from './constant'
 
export const addNumberActions = (num) => ({
  type: actionsType.ADD_NUMBER,
  num
})
 
export const subNumberActions = (num) => ({
  type: actionsType.SUB_NUMBER,
  num
})

reducer.js 处理派发的actions，返回新的state 实现state状态更新

import * as actionsTypes from './constant'
 
const initialState = {
  counter: 10
}
 
function reducer(state = initialState, actions) {
  switch(actions.type) {
    case actionsTypes.ADD_NUMBER: 
      return {...state, counter: state.counter + actions.num}
    case actionsTypes.SUB_NUMBER: 
      return {...state, counter: state.counter - actions.num}
    default:
      return state
  }
}
 
export default reducer

index.js 导出reducer 

import reducer from "./reducer";
 
export default reducer
export * from "./createActions"

创建store

import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import thunk from 'redux-thunk'
 
import counterReducer from './features/counter'
import homeReducer from './features/home'
import userInfoReducer from './features/userInfo'
 
const reducer = combineReducers({
  counter: counterReducer,
  home: homeReducer,
  userInfo: userInfoReducer
})
 
// 打开 redux-devtools  {trace: true} 追踪代码执行
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({trace: true}) || compose;
 
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)))
 
export default store

7. Redux使用流程

注意：此图出自coderwhy老师的react课程讲解，有兴趣的小伙伴可以腾讯课堂搜索why老师课程学习

Redux官方文档对于Redux更新state的流程图表述：

8. Redux融入react使用

• 在 componentDidMount 中定义数据的变化，当数据发生变化时重新设置 counter;
• 在发生点击事件时，调用store的dispatch来派发对应的action；

8.1 react-redux使用

前文开头强调redux和react没有直接的关系，在React, Angular, Ember, jQuery, or vanilla JavaScript也完全可以使用Redux。

React官方为了在项目中更高效的使用redux，redux官方提供了react-redux库

npm install react-redux

import { Provider } from 'react-redux'
import store from "./store"
 
 
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(
  <Provider store={store}>
    <App/>
  Provider>
  )

组件中：

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { addNumberActions, subNumberActions } from '../../store/features/counter'
 
export class About extends PureComponent {
 
  calcNumber(num, isAdd) {
    if(isAdd) {
      this.props.addNumber(num)
    } else {
      this.props.subNumber(num)
    }
  }
 
  render() {
    const { counter, banners, recommends } = this.props
 
    return (
      <div>
        <h2>About: counter: {counter}h2>
        <div>
          <button onClick={e =>this.calcNumber(5, true)}>+5button>
          <button onClick={e =>this.calcNumber(5, false)}>-5button>
        div>
        <div>
          <h2>banners数据：h2>
          <ul>
            {
              banners.map((item, index) => {
                return <li key={index}>{item.title}li>
              })
            }
          ul>
        div>
        <div>
          <h2>recommends数据：h2>
          <ul>
            {
              recommends.map((item, index) => {
                return <li key={index}>{item.title}li>
              })
            }
          ul>
        div>
      div>
    )
  }
}
 
const mapStateToProps = (state) => ({
  counter: state.counter.counter,
  banners: state.home.banners,
  recommends: state.home.recommends
})
 
const mapDispatchToProps = (dispatch) => ({
  addNumber(num) {
    dispatch(addNumberActions(num))
  },
  subNumber(num) {
    dispatch(subNumberActions(num))
  }
})
 
export default connect(mapStateToProps, mapDispatchToProps)(About)

8.2 组件中的异步操作

对于网络请求中的数据，需要交给redux来处理，需要通过中间件（middleware）来实现

理解中间件：

• 中间件的目的是在dispatch的action和最终达到的reducer之间，扩展一些自己的代码；
• 比如 日志记录、调用异步接口、添加代码调试功能 等等；

• 默认情况下的dispatch(action)，action需要是一个JavaScript的对象；
• redux-thunk可以让dispatch(action函数)，action可以是一个函数；
• 该函数会被调用，并且会传给 这个函数一个 dispatch函数和getState函数 ；
  • dispatch函数 用于我们之后再次派发action；
  • getState函数 考虑到我们之后的一些操作需要依赖原来的状态，用于让我们可以获取之前的一些状态；

npm install redux-thunk

const store = createStore(reducer, applyMiddleware(thunk))

export const fetchHomeMultidataActions = () => {
  return (dispatch, getData) => {
    axios.get('http://123.207.32.32:8000/home/multidata').then(res => {
      const banners = res.data.data.banner.list
      const recommends = res.data.data.recommend.list
      dispatch(changeBannersActions(banners))
      dispatch(changeRecommendsActions(recommends))
    })
  }
}

8.3 store的模块化分

import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
 
const reducer = combineReducers({
  counter: counterReducer,
  home: homeReducer,
  userInfo: userInfoReducer
})