redux基礎

アクションは普通のJavaScriptオブジェクトで、何が起こったかを説明します.
それはstoreデータの唯一のソースです.普通はstore.dispatch()を通じてactionをstoreに伝えます.新しいtodoタスクを追加するactionはこうです.

const ADD_TODO = 'ADD_TODO'
{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

上記の例では、typeは「一つのtodoを追加する」動作を表し、textは「追加するtodoの内容」を表している.(action内では、実行する動作を表す文字列タイプのtypeフィールドを使用しなければならない.多くの場合、typeは文字列定数として定義されている.type以外のデータインターフェースは自分で決定する)
todoのactionを完成するには以下の通りです.

{
  type: "TOGGLE_TODO",//  “    todo”   
  index: 5//      todo id
}

最後にフィルタリングtodoを設定する方式

{
  type: "SET_VISIBILITY_FILTER",//         
  filter: "SHOW_COMPLETED"//          
}

アクション作成関数は、上記のアクションオブジェクトを作成するためのツール関数です.

function addTodo(text) {
  return {
    type: "ADD_TODO",
    text
  }
}

reducerはstateとactionを受信し、新しいstateの関数を返します.(previousState, action) => newStateは、このような関数をreducerと呼ぶのは、Array.prototype.reduce(reducer, ?initialValue)に導入されたコールバック関数と同じタイプに属するからである.(reducer関数の最初のパラメータは「積算器」で、2番目のパラメータは「現在値」です.)

//   action     action  
const todos=(state=[],action)=>{//         todo list
    switch (action.type) {
        case 'ADD_TODO'://     todo，     todo list  ，       todo     
            return[
                ...state,
                {
                    id:action.id,
                    text:action.text,
                    completed:false
                }
            ]
         case 'TOGGLE_TODO'://         todo，     id   todo        
             return state.map(todo=>
                (todo.id===action.id)
                ?{...todo,completed:!todo.completed}
                :todo
            )
        default:
            return state;
    }
}
//         ，        （    ，    ，    ）
const visibilityFilter=(state='SHOW_ALL',action)=>{
    switch(action.type){
        case 'SET_VISIBILITY_FILTER'://     ，          
            return action.filter
        default:
            return state
    }
}

以上がTodoを処理するreducerであり、このように分割するのは、処理されたデータソースによって分割されたものであり、詳細はコードコメントに記載されている.マージには以下のコードがあります.

//  state action
function todoApp(state = {}, action) {
  return {
    visibilityFilter: visibilityFilter(state.visibilityFilter, action),
    todos: todos(state.todos, action)
  }

ReduxはcombineReducers()ツールクラスを提供して、上記todoAppのすることをします.

import { combineReducers } from 'redux'

const todoApp = combineReducers({
  visibilityFilter,
  todos
})

export default todoApp

reducerの内容からstateオブジェクトの構造は以下の通りである.

{
  todos:[],
  visibilityFilter:''
}

StoreはアクションとReducersを結びつける対象です.

import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)//    reducers        store

一つのアクションを開始するstore.dispatch(addTodo('Learn about actions')).