[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 }
*/
[Functional Programming ADT] Create a Redux Store for Use with a State ADT Based Reducer的更多相关文章
- [Functional Programming] Randomly Pull an Item from an Array with the State ADT (Pair)
Functor composition is a powerful concept that arises when we have one Functor nested in another Fun ...
- Beginning Scala study note(4) Functional Programming in Scala
1. Functional programming treats computation as the evaluation of mathematical and avoids state and ...
- [React + Functional Programming ADT] Connect State ADT Based Redux Actions to a React Application
With our Redux implementation lousy with State ADT based reducers, it is time to hook it all up to a ...
- [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 re ...
- [Functional Programming ADT] Combine Multiple State ADT Based Redux Reducers
Redux provides a convenient helper for combining many reducers called combineReducer, but it focuses ...
- [Functional Programming ADT] Create State ADT Based Reducers (applyTo, Maybe)
The typical Redux Reducer is function that takes in the previous state and an action and uses a swit ...
- [Functional Programming ADT] Adapt Redux Actions/Reducers for Use with the State ADT
By using the State ADT to define how our application state transitions over time, we clear up the ne ...
- [Functional Programming] Draw Items from One JavaScript Array to Another using a Pair ADT
We want to be able to pick nine random cards from an array of twelve cards, but can run into problem ...
- [Functional Programming] Combine Multiple State ADT Instances with the Same Input (converge(liftA2(constant)))
When combining multiple State ADT instances that depend on the same input, using chain can become qu ...
随机推荐
- Mysql数据库表的类型有哪些
截至目前,MySQL一共向用户提供了包括DBD.HEAP.ISAM.MERGE.MyIASM.InnoDB以及Gemeni这7种Mysql表类型.其中DBD.InnoDB属于事务安全类表,而其他属于事 ...
- 编写.gitignore 文件
讲代码 放入 Git 仓库中进行版本控制管理时,有些文件是不需要放入Git 中,比如 Maven 生成的target 目录,IDEA/Eclipse的工程文件, 在项目的根目录 下 添加一个名为.gi ...
- js跨域请求实现
js代码 var url = zfba2url + "/fzyw/xzfy/smcl/autoUpdateByWS.action"; var data = { "writ ...
- 删除元素(LintCode)
删除元素 给定一个数组和一个值,在原地删除与值相同的数字,返回新数组的长度. 元素的顺序可以改变,并且对新的数组不会有影响. 样例 给出一个数组 [0,4,4,0,0,2,4,4],和值 4 返回 4 ...
- python 字符串,数学之间的不可描述的关系
首先说一下输入: >>> a=raw_input(" ") 1.234 >>> a '1.234' >>> 可以看到使用raw ...
- [BZOJ4813][CQOI2017]小Q的棋盘(DP,贪心)
4813: [Cqoi2017]小Q的棋盘 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 804 Solved: 441[Submit][Statu ...
- [BZOJ 3326] 数数
Link: BZOJ 3326 传送门 Solution: 明显是一道数位$dp$的题目,就是递推式复杂了点 先要求出一个数$\bar{n}$向添加一位后的$\bar{np}$的转化关系 令$res[ ...
- wannafly挑战赛14
第一次打wannafly..觉得自己好菜啊... 题目描述 在三维空间中,平面 x = 0, y = 0, z = 0,以及平面 x + y + z = K 围成了一个三棱锥. 整天与整数打交道的小明 ...
- Gauss 消元(模板)
/* title:Gauss消元整数解/小数解整数矩阵模板 author:lhk time: 2016.9.11 没学vim的菜鸡自己手打了 */ #include<cstdio> #in ...
- 【二分答案】【最大流】[HNOI2007]紧急疏散EVACUATE
[HNOI2007]紧急疏散EVACUATE 题目描述 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一块空地:如果是'X',那么表示这是一面 ...