zoukankan      html  css  js  c++  java
  • [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()));
  • 相关阅读:
    Intel的cpu虚拟化
    [转]深入理解Kingfisher(下)
    [转]深入理解Kingfisher(上)
    [转]Xcode中TimeProfile的使用
    [汇]编译错误汇总
    [汇]我常去逛的iOS干货文章、blog等
    [转]UICollectionView 全解
    [转]iOS 保持界面流畅的技巧
    [转]Swift 基于 willSet & didSet 的订阅block(Observable)
    IOS开发之UIScrollViewDelegate详解
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10356405.html
Copyright © 2011-2022 走看看