Redux中主要由三部分組成：Action,Reducer,Store.
Action
Action用來傳遞操作state的信息到store，是store的唯一來源。以對象形式存在
{
type: 'ADD_TODO',//type必須驰贷，其余字段隨意崎淳。
text: 'Build my first Redux app'
}
多數(shù)情況下，type會被定義成字符串常量秦士。且當應用規(guī)模較大時频鉴，建議使用單獨的模塊或文件來存放 action栓辜。
隨著代碼的增多，這種直接聲明方式會難以組織垛孔，可以通過Action創(chuàng)建函數(shù)(Action Creator)來生產(chǎn)action
function addTodo(text) {
return {
type: 'ADD_TODO',
text
}
}
Reducer
Reducer用來處理action,通過傳入舊的state和action來指明如何更新state藕甩。
state 默認情況下要返回應用的初始 state，而且當action.type很多時周荐，reducer也可以拆分成一個個小的reducer,每個reducer分別處理state中的一部分數(shù)據(jù)狭莱，最后將處理后的數(shù)據(jù)合并成整個state。其中概作，redux提供了combineReducers()方法來合并多個子reducer腋妙。
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
action用來描述發(fā)發(fā)生了什么，reducer根據(jù)action更新state,Store就是把這幾樣東西連接到一起的對象讯榕。
有以下職責：
1骤素、維持應用的state
2、提供getState()方法獲取state
3愚屁、提供dispatch()方法更新state
4济竹、通過subscribe()注冊監(jiān)聽器
5、通過subscribe()返回的函數(shù)注銷監(jiān)聽器
Redux 應用只有一個單一的 store霎槐。
import { createStore } from 'redux'
import todoApp from './reducers'
//已有的 reducer 來創(chuàng)建 store
let store = createStore(todoApp,window.STATE_FROM_SERVER)//第二個參數(shù)用于設置state初始狀態(tài)送浊。
最常用的是dispatch()方法，這是修改state的唯一途徑栽燕。Redux 中只需把 action 創(chuàng)建函數(shù)的結(jié)果傳給 dispatch()方法即可發(fā)起一次 dispatch 過程(這個過程就執(zhí)行了當前的reducer)罕袋。
dispatch(addTodo(text))
dispatch(completeTodo(index))
或者創(chuàng)建一個 被綁定的 action 創(chuàng)建函數(shù) 來自動 dispatch：
const boundAddTodo = (text) => dispatch(addTodo(text))
const boundCompleteTodo = (index) => dispatch(completeTodo(index))
然后直接調(diào)用它們：
boundAddTodo(text);
boundCompleteTodo(index);
下面是dispatch得部分源碼
function dispatch(action) {
currentState = currentReducer(currentState, action);
listeners.slice().forEach(function (listener) {
return listener();
});
return action;
}
所以redux的具體流程圖如下
那么redux中到底數(shù)據(jù)怎么傳遞呢改淑？組件一級級的怎么通信呢？
react-redux
這用來結(jié)合react和redux浴讯，并提供了兩個接口Provider()和connect().
Provider可以將從createStore返回的store放入context中朵夏，使子集可以獲取到store并進行操作；
//將根組件包裝進Provider
let store = createStore(todoApp);
let rootElement = document.getElementById('root')
render(
<Provider store={store}>
<App />
</Provider>,
rootElement
)
connect 會把State和dispatch轉(zhuǎn)換成props傳遞給子組件, 是React與Redux連接的核心榆纽。
任何一個從 connect()包裝好的組件都可以得到一個dispatch()方法作為組件的 props仰猖，以及得到全局 state 中所需的任何內(nèi)容。connect()的唯一參數(shù)是 selector奈籽。此方法可以從 Redux store 接收到全局的 state饥侵，然后返回組件中需要的 props。
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { addTodo, completeTodo, setVisibilityFilter, VisibilityFilters } from '../actions';
import AddTodo from '../components/AddTodo';
import TodoList from '../components/TodoList';
import Footer from '../components/Footer';
class App extends Component {
render() {
// 通過調(diào)用 connect() 注入dispatch()方法和兩個組件分別所需要的state
const { dispatch, visibleTodos, visibilityFilter } = this.props
return (
< div >
< AddTodo onAddClick = {//onAddClick是在AddToDo組件中定義的從prop繼承的屬性方法dispatch()
text => dispatch(addTodo(text))//向dispatch()方法傳入action衣屏，直接更新對應的state
}
/>
< TodoList todos = { visibleTodos }//向該組件傳遞state
onTodoClick = { index => dispatch(completeTodo(index)) }
/ >
< Footer filter = { visibilityFilter }
onFilterChange = { nextFilter => dispatch(setVisibilityFilter(nextFilter)) }
/>
</div >
)
}
}
//提供驗證器躏升，來驗證傳入數(shù)據(jù)的有效性
App.propTypes = {
visibleTodos: PropTypes.arrayOf(PropTypes.shape({ text: PropTypes.string.isRequired, completed: PropTypes.bool.isRequired })),
visibilityFilter: PropTypes.oneOf(['SHOW_ALL', 'SHOW_COMPLETED', 'SHOW_ACTIVE']).isRequired }
//根據(jù)用戶選擇，從而傳入相對應的數(shù)據(jù)
function selectTodos(todos, filter) {
switch (filter) {
case VisibilityFilters.SHOW_ALL:
return todos;
case VisibilityFilters.SHOW_COMPLETED:
return todos.filter(todo => todo.completed);
case VisibilityFilters.SHOW_ACTIVE:
return todos.filter(todo => !todo.completed);
}
}
// 基于全局 state 狼忱，哪些是我們想注入的 props ?// 注意：使用 https://github.com/faassen/reselect 效果更佳膨疏。
function select(state) {
return {
visibleTodos: selectTodos(state.todos, state.visibilityFilter),
visibilityFilter: state.visibilityFilter
};
}
// 包裝 component ，注入 dispatch 和 state 到其默認的 connect(select)(App) 中钻弄；
export default connect(select)(App);
【參考】
chrome擴展Redux Devtools
http://www.reibang.com/p/3334467e4b32
http://react-china.org/t/redux/2687
https://leozdgao.me/reacthe-reduxde-qiao-jie-react-redux/
https://github.com/matthew-sun/blog/issues/18
http://book.apebook.org/boyc/redux/redux2.html
http://hustlzp.com/post/2016/03/react-redux-deployment
