OUT PUT React Redux

Reduxの流れ

OUTPUT場としてメモがてらに書く

とりあえずインストール

npm i -S redux

reducer

//初期state定義
const INITIAL_STATE = {
  tasks: []
}

//tasksReducerの定義
export const tasksReducer(state = INITIAL_STATE, action){
  switch(action.type){
    case 'ADD_TASK':
      return {
        ...state,
        tasks: [...state.tasks, action.task]
      };
    default:
      return state;
  }  

reducerでstoreの変更したいところを書く
今の所reducerが一つしかないので,ここのINITIAL_STATEだけがstoreのstateになる

Action

const addTask = task => ({
  type: 'ADD_TASK',
  task
})

追加したいタスクを引数として受け取り、Actionオブジェクトをreturnするだけの関数

store

import { createStore } from 'redux';

import taskReducer from './reducer' //reducerを置いてあるpath

const store createStore(taskReducer);

const addTask = task => ({
  //省略
})

store.dispatch(addTask('明日わさびを買う'))

createStoreでstoreを生成
store生成にはreducerが必要なのでcreateStoreの引数にreducerを渡す。

storeのdispatchメソッドを使ってactionを発行してreducerによって状態を変える