A Predictable State Container for JS Apps

Action

描述發生甚麼事的物件，是store唯一的資訊來源，藉由dispatch傳遞到store裡

// 定義action的type
export const ADD_MONEY = 'ADD_MONEY'

//定義action，component中會使用dispatch呼叫
export const addMoney = count => {
    return {
        type: 'ADD_MONEY',
        count
    }
}

Reducer

它描述一個 action 如何把 state 轉換成下一個 state。reducer接收先前的state和action，回傳下一個state

state : (previousState, action) => newState

// 傳入state初始化數據跟acti
const addMoney = (state = 0,action) => {
    switch(action.type) {
        case 'ADD_MONEY':
            return state+action.count
            
        default:
            return state
    }
}

export default addMoney

必須是pure function : 傳相同的參數一定會得到相同的值

Store

存放資料，只會有一個store存放所有資料

reducer/index.js

import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'
import addMoney from './money'

//用combineReducers將所有reducer合併export
const todoApp   = combineReducers({
    todos,
    visibilityFilter,
    addMoney
})

export default todoApp

import { createStore } from 'redux'
import todoApp from '../reducer/index'

// 引入合併後的reducer並創建store
const store = createStore(todoApp)

export default store

Redux 傳遞資料過程

1. component裡呼叫store.dispatch(action)