redux

redux

• Redux 是一个使用叫做“action”的事件来管理和更新应用状态的模式和工具库

• 使用场景

  • 在应用的大量地方，都存在大量的状态
  • 应用状态会随着时间的推移而频繁更新
  • 更新该状态的逻辑可能很复杂
  • 中型和大型代码量的应用，很多人协同开发

• state：驱动应用的真实数据源头

• view：基于当前状态的 UI 声明性描述

• actions：根据用户输入在应用程序中发生的事件，并触发状态更新

• reducer reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state

你可以将 reducer 视为一个事件监听器，它根据接收到的 action（事件）类型处理事件。

• 之所以将这样的函数称之为 reducer，是因为这种函数与被传入 Array.prototype.reduce(reducer, ?initialValue) 里的回调函数属于相同的类型。保持 reducer 纯净非常重要。永远不要在 reducer 里做这些操作:

• 修改传入参数;

• 执行有副作用的操作，如 API 请求和路由跳转;

• 调用非纯函数，如 Date.now() 或 Math.random() 。

• createStore 创建Store

• reducer 初始化、修改状态函数

• dispatch 提交变更

• getstate 获取初始值

• subscribe 变更订阅

示例

// store/index.js
import { createStore } from 'redux'

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

export default store

// react 中使用

import React, {Component} from "react";
import store  from './redux';

export default class App extends Component {

  componentDidMount(){
    store.subscribe(()=>{
      this.forceUpdate()
    })
  }

  add = () => {
    store.dispatch({type: "ADD"});
  }

  minus = () => {
    store.dispatch({type: 'MINUS'})
  }

  render(){
    return (
    <div className="App">
      <header className="App-header">
          <div>{store.getState()}</div>
          <span onClick={this.add}> ADD </span>
          <span onClick={this.minus}> MINUS </span>
      </header>
    </div>
    )
  }
}

简单实现

// 简单实现这个函数 redux函数
export function createStore(reducer) {
    let currentState;
    let currentListeners = []

    function getState() {
        return currentState
    }
    function dispatch (action) {
        currentState = reducer(currentState,action)
        currentListeners.forEach(linstener => linstener())
        return action
    }
    function  subscribe (listener) {
        currentListeners.push(listener)
    }
    // 设置初始值
    dispatch({type: "KKPSYKSHHSJ/XXXXX"})
    return {
        getState,
        dispatch,
        subscribe
    }
}

插件

Redex 本身的功能逻辑还是比较简单的，而且默认只支持同步，实现其他功能就需要依赖插件机制 如：redux-thunk redux-logger

• 用法：

import logger from "redux-logger";
import thunk from "redux-thunk";
import counterReducer from './counterReducer'

const store = createStore(counterReducer, applyMiddleware(thunk, logger));