[Functional Programming ADT] Initialize Redux Application State Using The State ADT
从来好事天生俭,自古瓜儿苦后甜。这篇文章主要讲述[Functional Programming ADT] Initialize Redux Application State Using The State ADT相关的知识,希望能为你提供帮助。
【[Functional Programming ADT] Initialize Redux Application State Using The State ADT】Not only will we need to give our initial state to a Redux store, we will also need to be able to reset our state at any time by dispatching an action. We can get the best of both worlds by having a function that will return an object with all of our initial values in it. Then use that function to craft a
State
ADT transition that will throw out whatever our previous state was and replace it with the original initial state.
We’
ll not only build out an initialize state transaction, but also use that new transaction to craft an action creator to expose a means to dispatch at any time an action that will reset our state.
Set initial state:
We use PUT state to reset the state.
import State from "crocks/State"; const { put } = State; // initialState :: () -> AppState export const initialState = () => ({ colors: ["orange", "green", "blue", "yellow"], shapes: ["triangle", "circle", "square"], cards: [], hint: {}, isCorrect: null, left: 8, moves: 0, rank: 4, seed: 23 }); // initialize :: () -> State AppState () const initialize = () => put(initialState()); export default initialize;
Create action for reducer:
1. Create action const string
2. Action creator
3. Create reducer, bind action const to state ()
import { createAction, createReducer } from "../helpers"; import start, { markCardsUnselected } from "../model/game"; import initialize from "../model/initialize"; const HIDE_ALL_CARDS = "HIDE_ALL_CARDS"; const START_GAME = "START_GAME"; const RESET_GAME = "RESET_GAME"; // hideAllCards :: String -> Action String export const hideAllCards = createAction(HIDE_ALL_CARDS); // startGame :: String -> Action String export const startGame = createAction(START_GAME); // startGame :: String -> Action String export const resetGame = createAction(RESET_GAME); // reducer :: Reducer const reducer = createReducer({ HIDE_ALL_CARDS: markCardsUnselected, START_GAME: start, RESET_GAME: initialize }); export default reducer;
Kick off:
Call the reducer with state, action.
import log from "./logger"; import reducer from "./data/reducers"; import { resetGame } from "./data/reducers/game"; import initialize from "./data/model/initialize"; log(reducer({}, resetGame()));
推荐阅读
- 3.java内存模型以及happens-before规则
- Android Studio高级配置
- appium连接模拟器和真机
- Android Studio 设置编辑器(Editor)的字体字体大小
- 继上篇博客对安卓爬虫以及TextView更新的问题解释
- 使用TensorFlow 2.0实现神经样式转换
- TensorFlow 2.0的十个重要更新
- 电子表格的库存模型模拟
- 使用电子表格中的INDEX-MATCH处理数据