We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
store
store.dispatch()
action
添加新 todo 任务的 action 是这样的:
const ADD_TODO = 'ADD_TODO' { type: ADD_TODO, text: 'Build my first Redux app' }
Action 创建函数 就是生成 action 的方法。“action” 和 “action 创建函数” 这两个概念很容易混在一起,使用时最好注意区分。
Action
“action”
“action 创建函数”
在 Redux 中的 action 创建函数只是简单的返回一个 action:
Redux
function addTodo(text) { return { type: ADD_TODO, text } }
Redux 中只需把 action 创建函数的结果传给 dispatch() 方法即可发起一次 dispatch 过程。
dispatch()
dispatch
dispatch(addTodo(text)) dispatch(completeTodo(index))
或者创建一个 被绑定的 action 创建函数 来自动 dispatch:
const boundAddTodo = text => dispatch(addTodo(text)) const boundCompleteTodo = index => dispatch(completeTodo(index))
然后直接调用它们:
boundAddTodo(text); boundCompleteTodo(index);
store 里能直接通过 store.dispatch() 调用 dispatch() 方法,但是多数情况下你会使用 react-redux 提供的 connect() 帮助器来调用。bindActionCreators() 可以自动把多个 action创建函数 绑定到 dispatch() 方法上。
react-redux
connect()
bindActionCreators()
reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。
reducer
state
(previousState, action) => newState
只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。
function todoApp(state = initialState, action) { switch (action.type) { case SET_VISIBILITY_FILTER: return Object.assign({}, state, { visibilityFilter: action.filter }) default: return state } }
不要修改 state。 使用 Object.assign() 新建了一个副本。不能这样使用 Object.assign(state, { visibilityFilter: action.filter }),因为它会改变第一个参数的值。你必须把第一个参数设置为空对象。你也可以开启对ES7提案对象展开运算符的支持, 从而使用 { ...state, ...newState } 达到相同的目的。
Object.assign()
Object.assign(state, { visibilityFilter: action.filter })
{ ...state, ...newState }
在 default 情况下返回旧的 state。遇到未知的 action 时,一定要返回旧的 state。
default
现在我们可以开发一个函数来做为主 reducer,它调用多个子 reducer 分别处理 state 中的一部分数据,然后再把这些数据合成一个大的单一对象。主 reducer 并不需要设置初始化时完整的 state。初始时,如果传入 undefined, 子 reducer 将负责返回它们的默认值。
function todos(state = [], action) { switch (action.type) { case ADD_TODO: return [ ...state, { text: action.text, completed: false } ] case TOGGLE_TODO: return state.map((todo, index) => { if (index === action.index) { return Object.assign({}, todo, { completed: !todo.completed }) } return todo }) default: return state } } function visibilityFilter(state = SHOW_ALL, action) { switch (action.type) { case SET_VISIBILITY_FILTER: return action.filter default: return state } } function todoApp(state = {}, action) { return { visibilityFilter: visibilityFilter(state.visibilityFilter, action), todos: todos(state.todos, action) } }
注意每个 reducer 只负责管理全局 state 中它负责的一部分。每个 reducer 的 state 参数都不同,分别对应它管理的那部分 state 数据。
Redux 提供了 combineReducers() 工具类来做上面 todoApp 做的事情,这样就能消灭一些样板代码了。有了它,可以这样重构 todoApp:
import { combineReducers } from 'redux' const todoApp = combineReducers({ visibilityFilter, todos }) export default todoApp
完整示例
import { combineReducers } from 'redux' import { ADD_TODO, TOGGLE_TODO, SET_VISIBILITY_FILTER, VisibilityFilters } from './actions' const { SHOW_ALL } = VisibilityFilters function visibilityFilter(state = SHOW_ALL, action) { switch (action.type) { case SET_VISIBILITY_FILTER: return action.filter default: return state } } function todos(state = [], action) { switch (action.type) { case ADD_TODO: return [ ...state, { text: action.text, completed: false } ] case TOGGLE_TODO: return state.map((todo, index) => { if (index === action.index) { return Object.assign({}, todo, { completed: !todo.completed }) } return todo }) default: return state } } const todoApp = combineReducers({ visibilityFilter, todos }) export default todoApp
Store
Store 就是把它们联系到一起的对象。Store 有以下职责:
维持应用的 state; - 提供 getState() 方法获取 state; - 提供 dispatch(action) 方法更新 state; - 通过 subscribe(listener) 注册监听器; - 通过 subscribe(listener) 返回的函数注销监听器。
Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时,你应该使用 reducer 组合 而不是创建多个 store。
import { createStore } from 'redux' import todoApp from './reducers' let store = createStore(todoApp)
dispatch 机制中引入 Redux Thunk middleware
import thunkMiddleware from 'redux-thunk' import { createLogger } from 'redux-logger' import { createStore, applyMiddleware } from 'redux' import { selectSubreddit, fetchPosts } from './actions' import rootReducer from './reducers' const loggerMiddleware = createLogger() const store = createStore( rootReducer, applyMiddleware( thunkMiddleware, // 允许我们 dispatch() 函数 loggerMiddleware // 一个很便捷的 middleware,用来打印 action 日志 ) ) store.dispatch(selectSubreddit('reactjs')) store .dispatch(fetchPosts('reactjs')) .then(() => console.log(store.getState()) )
自述 · GitBook
The text was updated successfully, but these errors were encountered:
No branches or pull requests
它是
store
数据的唯一来源。一般来说你会通过store.dispatch()
将action
传到store
。添加新 todo 任务的
action
是这样的:Action
创建函数 就是生成action
的方法。“action”
和“action 创建函数”
这两个概念很容易混在一起,使用时最好注意区分。在
Redux
中的action
创建函数只是简单的返回一个 action:Redux
中只需把action
创建函数的结果传给dispatch()
方法即可发起一次dispatch
过程。或者创建一个 被绑定的
action
创建函数 来自动dispatch
:然后直接调用它们:
store
里能直接通过store.dispatch()
调用dispatch()
方法,但是多数情况下你会使用react-redux
提供的connect()
帮助器来调用。bindActionCreators()
可以自动把多个action
创建函数 绑定到dispatch()
方法上。reducer
就是一个纯函数,接收旧的state
和action
,返回新的state
。现在我们可以开发一个函数来做为主 reducer,它调用多个子 reducer 分别处理 state 中的一部分数据,然后再把这些数据合成一个大的单一对象。主 reducer 并不需要设置初始化时完整的 state。初始时,如果传入 undefined, 子 reducer 将负责返回它们的默认值。
Redux 提供了 combineReducers() 工具类来做上面 todoApp 做的事情,这样就能消灭一些样板代码了。有了它,可以这样重构 todoApp:
完整示例
Store
Store 就是把它们联系到一起的对象。Store 有以下职责:
维持应用的 state;
- 提供 getState() 方法获取 state;
- 提供 dispatch(action) 方法更新 state;
- 通过 subscribe(listener) 注册监听器;
- 通过 subscribe(listener) 返回的函数注销监听器。
dispatch 机制中引入 Redux Thunk middleware
参考资料
自述 · GitBook
The text was updated successfully, but these errors were encountered: