zoukankan      html  css  js  c++  java
  • [Functional Programming ADT] Create a Redux Store for Use with a State ADT Based Reducer

    With a well defined demarcation point between Redux and our State ADT based model, hooking up to a Redux store is no different than any other Redux based implementation. Once we have all of our transitions represented in dispatchable actions, we can step though a typical game flow and see our hard work pay off.

    We will see how to interget redux with our State:

    /store.js

    // redux store
    import { createStore } from "redux";
    import { initialState } from "./model/initialize";
    import reducer from "./reducers";
    
    export default createStore(reducer, initialState());

    index.js

    import log from "./logger";
    
    import { startGame, hideAllCards } from "./data/reducers/game";
    
    import { selectCard, showFeedback } from "./data/reducers/turn";
    
    import store from "./data/store";
    
    const { dispatch, getState } = store;
    
    log(getState());
    /**
    { colors: [ 'orange', 'green', 'blue', 'yellow' ], shapes: [ 'triangle', 'circle', 'square' ], cards: [ ], hint: { }, isCorrect: null, left: 8, moves: 0, rank: 4, seed: 1549885157384 }
    */

    It return our initial state.

    If we want to dipatch action, we can do:

    dispatch(startGame());
    /**
     * { colors: [ 'orange', 'green', 'blue', 'yellow' ], shapes: [ 'triangle', 'circle', 'square' ], cards: [ { id: 'green-square', color: 'green', shape: 'square', selected: true }, { id: 'yellow-circle', color: 'yellow', shape: 'circle', selected: true }, { id: 'green-circle', color: 'green', shape: 'circle', selected: true }, { id: 'yellow-square', color: 'yellow', shape: 'square', selected: true }, { id: 'blue-circle', color: 'blue', shape: 'circle', selected: true }, { id: 'green-triangle', color: 'green', shape: 'triangle', selected: true }, { id: 'orange-square', color: 'orange', shape: 'square', selected: true }, { id: 'yellow-triangle', color: 'yellow', shape: 'triangle', selected: true }, { id: 'orange-triangle', color: 'orange', shape: 'triangle', selected: true } ], hint: { }, isCorrect: null, left: 8, moves: 0, rank: 4, seed: 270041088 }
     */

  • 相关阅读:
    “sockaddr”: “struct”类型重定义的错误的解决办法《转》
    2019年车险
    tinylib
    命令行利用ffmpeg实现rtmp推流《转》
    Inno setup 判断系统32位还是64位
    vs2015编译OBS-Studio21.1.12
    啃OBS源码-界面汉字
    百年孤独人物关系1
    windows命令行查看文件MD5
    python 玩爬虫安装了一大堆第三方库
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10363006.html
Copyright © 2011-2022 走看看