简介

上一篇中提到了React与Redux的结合并且设计了Component的阶层，本篇将照着设计好的Component进行实作。

Action Creater

建立产生Action的Function，包含 :

let nextTodoId = 0;//新增Todo的Actionexport const addTodo = (text) => {    return{        type : "ADD_TODO",        id : nextTodoId++,        text    }};//设定筛选Filter的Acitonexport const setVisibilityFilter = (filter) => {    return {      type: 'SET_VISIBILITY_FILTER',      filter    }};//指定id Todo 的Actionexport const toggleTodo = (id) => {    return {      type: 'TOGGLE_TODO',      id    }};

Reducer

建立处理Action的Reducer，包含 :

处理Todos的Reducer

处理visibilityFilter的Reducer

import { combineReducers } from 'redux'//将Reducer拆分const todo = (state = {}, action) => {    switch (action.type) {      case 'ADD_TODO':        return {          id: action.id,          text: action.text,          completed: false        }      case 'TOGGLE_TODO':        if (state.id !== action.id) {          return state        }          return Object.assign({}, state, {          completed: !state.completed        })        default:        return state    }}    const todos = (state = [], action) => {    switch (action.type) {      //呼叫todo function，新增新的todo到原本的Todos Array中       case 'ADD_TODO':        return [          ...state,          todo(undefined, action)        ]      //改变指定todo状态      case 'TOGGLE_TODO':        return state.map(t =>          todo(t, action)        )      default:        return state    }}  const visibilityFilter = (state = 'SHOW_ALL', action) => {    switch (action.type) {      case 'SET_VISIBILITY_FILTER':        return action.filter      default:        return state    }}//透过Redux的utility 将两个Reducer function结合为一个可以传递给createStore的单一reducers functionexport const todoApp  = combineReducers({    todos,    visibilityFilter})

index.js

import React from "react";import ReactDOM from "react-dom";import App from "./App";import { createStore } from "redux";import { Provider } from "react-redux";import todoApp from "./Store/Reducers"let store = createStore(todoApp);//透过getState观察目前state状态console.log(store.getState())ReactDOM.render(    <Provider store = {store}>        <App />    </Provider>,    document.getElementById("root"));

参考资料 :
从Redux 的作者学习它