Redux

官网:https://www.reduxjs.cn/

Redux 是针对 JavaScript 应用程序的可预测状态容器。

解决项目数据管理、组件通信,用于数据和交互较多的应用

一、安装

cnpm install redux --save

二、创建Store

  Store 就是用来维持应用所有的 state 树 的一个对象。 改变 store 内 state 的唯一途径是对它 dispatch(action)。

   Store 的职责:

维持应用的 state;
提供 getState() 方法获取 state;
提供 dispatch(action) 方法更新 state;
通过 subscribe(listener) 注册监听器;
通过 subscribe(listener) 返回的函数注销监听器。

import { createStore } from 'redux';
// 创建一个 Redux store 来以存放应用中所有的 state。应用中应有且仅有一个 store。
const store = createStore(reducer);

三、Reducer

  reducer (Function): 接收两个参数,分别是当前的 state 树和要处理的 action,返回新的 state 树。 

function reducer (state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

四、Action

  Action:一个普通对象,触发数据(State)改变的方法,type属性必需,表Action的名称,其他key为携带信息,如:{ type:'ADD_TODO',text:'old value' }
  Action 创建函数: 生成 action 的方法,示例如下
function makeAction(text) {
  return {
    type: ADD_TODO,
    text
  }
}

五、dispatch

  Dispatch:触发action,执行reducer,更新state

store.dispatch(makeAction('new value'))

六、subscribe(listener)

  监听器。每当 dispatch action 的时候就会执行,state 树中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。

// 注册监听器
const unsubscribe=store.subscribe(()=>{console.log(store.getState())})
// 解绑监听器
unsubscribe()

 

posted @ 2021-03-11 15:06  惊蛰丶  阅读(194)  评论(0编辑  收藏  举报