天天看點

React-Redux-基本使用

安裝

安裝穩定版:

npm install --save redux      

index.js:

const redux = require('redux');

// 定義一個狀态
let initialState = {
    count: 0
};

// 利用 store 來儲存狀态(state)
const store = redux.createStore(reducer);

// 利用 action 來修改狀态
const addAction = {type: 'ADD_COUNT', num: 1};
const subAction = {type: 'SUB_COUNT', num: -1};

// 利用 reducer 将 store 和 action 串聯起來
function reducer(state = initialState, action) {
    switch (action.type) {
        case 'ADD_COUNT':
            return {count: state.count + action.num};
        case 'SUB_COUNT':
            return {count: state.count - action.num};
        default:
            return state;
    }
}      

監聽狀态的改變

store.subscribe(() => {
    console.log(store.getState());
});      

從 Store 中擷取存儲的狀态

console.log(store.getState());      

修改 Store 中存儲的狀态

store.dispatch(addAction);