redux模块化入门

不念不忘少年蓝@ 2021-09-19 03:32 337阅读 0赞

redux：提供给应用一个全局的状态，必须按照它的方式单向数据流方式修改状态  
**核心概念**：  
1，state就是一个状态对象  
2，action就是动作，用来触发reducer函数  
3，reducer是一个函数，用来修改state

模块化store结构  
![在这里插入图片描述][20190428104204113.png]  
**state.js**

const state = {
      info: {
        age: 20,
        sex: '男',
        money: 10000
      }
    }
    export default state

**actions.js**

import { store } from './store';
    // actions  所有的动作，dispatch会触发redcuer
    const actions = {
      addMoney (payload) {
        store.dispatch(
          {
            type: 'addMoney',
            payLoad: payload
          }
        )
      },
      subMoney (payload) {
        store.dispatch(
          {
            type: 'subMoney',
            payLoad: payload
          }
        );
      },
      addAge (payload) {
        store.dispatch(
          {
            type: 'addAge',
            payLoad: payload
          }
        );
      },
      subAge (payload) {
        store.dispatch(
          {
            type: 'subAge',
            payLoad: payload
          }
        );
      }
    
    }
    
    export default actions;
    /*
    
      */

**reducer.js**

import _state from './state.js'
    import { combineReducers } from 'redux';
    
    
    /**
     * 一个类型的reducer
     * @param {Object} state 把状态当作reducer的第一参数的默认值，
     * @param {Object} action (type:'foo',payLoad:obj)
     */
    const changMoney = (state = _state, action) => {
      let type = action.type
      // 根据action(动作)的类型，修改相应state的值
      switch (type) {
        case 'addMoney': state.info.money += 1000; break
        case 'subMoney': state.info.money -= action.payLoad; break;
        default:
      }
      return state
    }
    // 另一个类型的reducer
    const changeAge = (state = _state, action) => {
      let type = action.type
      switch (type) {
        case 'addAge': state.info.age += 1; break;
        case 'subAge': state.info.age -= 1; break;
        default:
      }
      return state
    }
    // combineReducers连接多个reducers
    const reducer = combineReducers(
      {
        changMoney,
        changeAge
      }
    )
    export default reducer

**store.js**

import reducer from './reducer'
    import _state from './state'
    import _actions from './actions'
    
    import { createStore } from "redux";
    // 用reducer实例化store
    export const store = createStore(reducer)
    // 暴露出状态 和 actions方便页面调用
    export const state = _state
    export const actions = _actions

**store的应用：**

import React, { Component } from 'react';
    // import { connect } from 'react-redux';
    import { store, state, actions } from './store/store'
    class App extends Component {
      constructor() {
        super()
        this.state = {
          money: state.info.money,
          age: state.info.age
        }
        // 订阅(监听/*  */)store,当触发actions时，会执行回调
        store.subscribe(() => {
          this.setState({
            money: state.info.money,
            age: state.info.age
          })
        })
      }
      componentDidMount () {
        // 居然没报错，不太严谨
        // state.info.money = 999
      }
      render () {
        return (
          <div className="App">
            <h2>工资：{this.state.money}</h2>
            <h2>年龄：{this.state.age}</h2>
            <button onClick={() => actions.addMoney()}>加钱</button>
            <button onClick={() => actions.subMoney(100)}>扣钱</button>
            <button onClick={() => actions.addAge()}>加一岁</button>
            <button onClick={() => actions.subAge()}>减一岁</button>
          </div>
        );
      }
    }
    export default App

**注意：action是不支持异步的**

要想支持需要用到中间件 ，[看大神的][Link 1]，或者简单地在异步成功后再触发actions

效果：  
![在这里插入图片描述][20190428105047804.jpg]

![在这里插入图片描述][20190428105057888.jpg]

[20190428104204113.png]: /images/20210812/7c9944d90ce449f98b23a9fca656fe9c.png
[Link 1]: http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html
[20190428105047804.jpg]: /images/20210812/979b6485a8fe4acab76aa0326bf71d47.png
[20190428105057888.jpg]: /images/20210812/3985f6e2a1c64f199e67b251bb91469e.png