Redux其实就这样的一回事,十分的简单。
import { createStore } from "redux";
const initialState = {
counter: 0
};
//Reducer
function reducer(state = initialState, action) {
if (action.type === 'COUNT_UP') {
//Mutable state(NO GOOD!)
/*
state.counter = state.counter + action.payload;
return state;
*/
//Immutable state
let newState = Object.assign({}, state);
newState.counter = state.counter + action.payload;
return newState;
}
return state;
};
//Action
function countUp(payload) {
return { type: 'COUNT_UP', payload };
}
//Store
const store = createStore(reducer);
//Subscribe method accepts a callback that will fire whenever an action is dispatched.
const result = [];
store.subscribe(() => {
result.push(store.getState());
console.log(result);
})
console.log(store.getState());
//Dispatch
store.dispatch( countUp(1) );
store.dispatch( countUp(2) );
store.dispatch( countUp(3) );
store.dispatch( countUp(4) );
store.dispatch( countUp(5) );
store.dispatch( countUp(6) );
Output:
[ ]
[ { counter: 1 } ]
[ { counter: 1 }, { counter: 3 } ]
[ { counter: 1 }, { counter: 3 }, { counter: 6 } ]
[ { counter: 1 },
{ counter: 3 },
{ counter: 6 },
{ counter: 10 } ]
[ { counter: 1 },
{ counter: 3 },
{ counter: 6 },
{ counter: 10 },
{ counter: 15 } ]
[ { counter: 1 },
{ counter: 3 },
{ counter: 6 },
{ counter: 10 },
{ counter: 15 },
{ counter: 21 } ]
See?就这么的简单。




