Redux学习

Redux是 状态管理器，由Flux演变而来

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action，一个描述发生什么的对象。 为了描述 action 如何改变 state 树，你需要编写 reducers

import { createStore } from 'redux'
// 编写一个reducer
function counter(state=0,action) {
  switch(action.type){
   case 'INCREMENT':
     return state + 1;
   case 'DECREMENT':
     return state - 1;
    default: 
     return state;
  }
}

// 创建 Redux store 来存放应用的状态
// API 是  { subscribe，dispatch， getState }
let store = createStore(counter)
// 可以手动订阅更新，也可以事件绑定到视图层
store.subscribe( ()=>console.log(store.getState()) )

// 改变内部state唯一方法是 dispatch一个action
store.dispatch({type: 'INCREMENT'}) 

三大原则

• 单一数据源
  唯一的store
• state是只读的
  唯一改变state的方式是触发action, 不能只修修改state
• 使用纯函数来执行修改
  Reducer是纯函数，接收先前的state和action，并返回一个新的state

基础

Action

定义用户交互的行为

const ADD_TODO = 'ADD_TODO'
const action = {
  type： ADD_TODO,
  text:'sdfjkwope'
}

Action 创建函数
Action 创建函数生成action的方法

function addTodo(text){
    return {
      type: ADD_TODO,
      text
  }
}

store.dispatch(action) // 触发action 

Reducer

纯函数，响应action，并更新state
不要做这些

• 修改传入的参数,不能修改state
• 执行有副作用的操作，如API请求和路由跳转
• 调用非纯函数，如Data.now(),Math.random()
  拆分/组合Reducer
  combineReducers()

import { combineReducers } from 'redux'
// 合并 visibilityFilter,todos两个reducer
const todoApp = combineReducers({
  visibilityFilter,
  todos
})

Store

Store是单一的，职责：

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

创建store

import { createStore } from 'redux'
import todoApp from  './reducers'
let store = createStore(todoApp)