Redux(状態管理)モジュールについて
理解するため、個人的にまとめて見たのですが
齟齬等がないかチェックいただけると幸いです。
また、これは説明として入れるべきだということなど添削していただけるとありがたいです。
Reduxの基本形
js:index.js
1import { createStore } from 'redux'; 2 3// 初期値 4const initialState = { 5 tasks: [], 6} 7 8// Reducer(actionから渡ってきた情報で状態を変化させる) 9const tasksReducer = (state = initialState, action) => { 10 switch(action.type) { 11 case 'ADD_TASK': 12 return { 13 ...state, 14 tasks: state.tasks.concat([action.payload.task]) 15 }; 16 default: 17 return state; 18 } 19} 20 21// Reducerをstoreに登録 22const store = createStore(tasksReducer); 23 24 25const handleChange = () => { 26 // store.getState()で情報取得 27 console.log(store.getState()); 28} 29// subscribe = Dispatchによってstoreの状態が変わったか監視 30const unsubscribe = store.subscribe(handleChange); 31 32// actionタイプ 33const addTask = (task) => ({ 34 type: 'ADD_TASK', 35 payload: { 36 task, 37 } 38}); 39 40// actionへDispatch(情報を送信) ※本来はViewからおこなう 41store.dispatch(addTask('Storeを学ぶ'));
具体的な問題点が何も示されておらず、ただの作業の丸投げでしかないと思います。
チェックして欲しいなら、お金払ってそういうサービスを受けられるところに頼みましょう。
https://teratail.com/help/question-tips
https://teratail.com/help/avoid-asking
あなたの回答
tips
プレビュー