redux知识点

redux概念复习

Action

actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state

1.1

store 数据的唯一来源；

一般来说你会通过 store.dispatch() 将 action 传到 store ；

1.2

Action 创建函数，Action 创建函数就是生成 action 的方法。
1
2
3
4
5
6
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}

Reducer

2.1 数据state与ui state 相分离

2.2 reducer禁忌：

修改传入参数；
执行有副作用的操作，如 API 请求和路由跳转；
调用非纯函数，如 Date.now() 或 Math.random()。

2.3 combineReducers() 将多个 reducer 合并成为一个。

import { combineReducers } from 'redux'

const todoApp = combineReducers({
  visibilityFilter,
  todos
})

export default todoApp

等价于

export default function todoApp(state = {}, action) {
  return {
    visibilityFilter: visibilityFilter(state.visibilityFilter, action),
    todos: todos(state.todos, action)
  }
}

const reducer = combineReducers({
  a: doSomethingWithA,
  b: processB,
  c: c
})

等价于

function reducer(state = {}, action) {
  return {
    a: doSomethingWithA(state.a, action),
    b: processB(state.b, action),
    c: c(state.c, action)
  }
}

Store

3.1 Redux 应用只有一个单一的 store

3.2 生成store

通过combineReducers() 将多个 reducer 合并成为一个根 reducer
调用createStore( reducer ) 方法，生成store

1
2
3

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

3.3 store的功能

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

// 每次 state 更新时，打印日志
// 注意 subscribe() 返回一个函数用来注销监听器
const unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

// 发起一系列 action
store.dispatch(addTodo('Learn about actions'))
store.dispatch(addTodo('Learn about reducers'))
store.dispatch(addTodo('Learn about store'))
store.dispatch(toggleTodo(0))
store.dispatch(toggleTodo(1))
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))

// 停止监听 state 更新
unsubscribe();

¶ redux概念复习

redux概念复习