store Store就是保存数据的地方，可以看成是一个容器，整个应用只有一个store
store
import { createStore } from 'redux';
const store = createStore(fn);
state
import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState();
一个state对应一个view，只要state相同，view就相同
action
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};
action就是view发出的通知，表示state应该要发生变化了
Action描述当前发生的事情。改变State的唯一办法，使用Action，它会传递数据到Store
Action Creator
const ADD_TODO = '添加 TODO';
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
const action = addTodo('Learn Redux');
store.dispatch() 是 view发出Action唯一的办法
import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
type: 'ADD_TODO',
payload: 'Learn Redux'
});
reducer
const reducer = function (state, action) {
// ...
return new_state;
};
Store收到Action以后，必须给出一个新的State,这样View才发生变化，这种State的计算过程就叫做Reducer，Reducer是一个函数，它接受Action和当前State作为参数，返回一个新的State
const defaultState = 0;
const reducer = (state = defaultState, action) => {
switch (action.type) {
case 'ADD':
return state + action.payload;
default:
return state;
}
};
const state = reducer(1, {
type: 'ADD',
payload: 2
});
实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。
Reducer是纯函数，对于同一个state，必定得到的同样的view，所以Reducer函数不能改变state
store.subscribe()
import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);
Reducer可以拆分
const chatReducer = (state = defaultState, action = {}) => {
const { type, payload } = action;
switch (type) {
case ADD_CHAT:
return Object.assign({}, state, {
chatLog: state.chatLog.concat(payload)
});
case CHANGE_STATUS:
return Object.assign({}, state, {
statusMessage: payload
});
case CHANGE_USERNAME:
return Object.assign({}, state, {
userName: payload
});
default: return state;
}
};
可以拆分为
const chatReducer = (state = defaultState, action = {}) => {
return {
chatLog: chatLog(state.chatLog, action),
statusMessage: statusMessage(state.statusMessage, action),
userName: userName(state.userName, action)
}
};
Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。
import { combineReducers } from 'redux';
const chatReducer = combineReducers({
chatLog,
statusMessage,
userName
})
export default todoApp;
流程
用户发出Action
store.dispatch(action);
然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。
let nextState = todoApp(previousState, action);
State 一旦有变化，Store 就会调用监听函数。
// 设置监听函数
store.subscribe(listener);
listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。
function listerner() {
let newState = store.getState();
component.setState(newState);
}
