zoukankan      html  css  js  c++  java
  • [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 React Shell. Having already built out some UI/UX in React that is connected to our store, we’ll spend the first part of this lesson with a quick tour of how our store integrates using the standard react-redux library.

    Once we get a handle on our state's propagation through the app, we can focus in on how we will dispatch our actions during game play. We’ll implement the ability to start the game by using the startGame action creator to create a dispatching function that is passed through our component tree, down to the Start Game button in our Playing Area.

    Add redux dev tool to the appliation:

    import { createStore, compose } from 'redux'
    
    import identity from 'crocks/combinators/identity'
    
    import { initialState } from './model/initialize'
    
    import reducer from './reducers'
    
    const composeEnhancers =
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
    
    export default createStore(
      reducer,
      initialState(),
      composeEnhancers(identity) // add devtool
    )

    Provide Store for React application:

    index.js:

    import React from 'react'
    import ReactDOM from 'react-dom'
    import { Provider } from 'react-redux'
    
    import './index.css'
    
    import store from './data/store'
    import Game from './Game'
    
    ReactDOM.render(
      <Provider store={store}>
        <Game />
      </Provider>,
      document.getElementById('root')
    )

    Dispatch action from component:

    import React from "react";
    import PropTypes from "prop-types";
    
    import pick from "crocks/helpers/pick";
    import unit from "crocks/helpers/unit";
    
    import { connect } from "react-redux";
    import { startGame } from "./data/reducers/game";
    
    import "./Game.css";
    
    import Bunny from "./components/Bunny";
    import Feedback from "./components/Feedback";
    import Messages from "./components/Messages";
    import PlayArea from "./components/PlayArea";
    import GameOver from "./components/GameOver";
    
    const Game = props => {
      const {
        answer,
        cards,
        hasWon,
        hint,
        isCorrect,
        moves,
        start, // passed in from here
        rank,
        restart
      } = props;
    
      return (
        <div className="game">
          <Bunny rank={rank} />
          <PlayArea answer={answer} cards={cards} startGame={start} /> <!-- Used here -->
          <Messages hint={hint} moves={moves} />
          <Feedback isCorrect={isCorrect} />
          <GameOver hasWon={hasWon} restartGame={restart} />
        </div>
      );
    };
    
    Game.propTypes = {
      answer: PropTypes.func.isRequired,
      cards: PropTypes.array.isRequired,
      isCorrect: PropTypes.bool,
      hasWon: PropTypes.bool,
      hint: PropTypes.object.isRequired,
      moves: PropTypes.number.isRequired,
      start: PropTypes.func.isRequired,
      rank: PropTypes.number.isRequired,
      restart: PropTypes.func.isRequired
    };
    
    const mapState = pick([
      "cards",
      "hasWon",
      "hint",
      "isCorrect",
      "moves",
      "rank"
    ]);
    
    const mapDispatch = dispatch => ({
      answer: unit,
      restart: unit,
      start: () => dispatch(startGame()) // Connect to our State ADT
    });
    
    export default connect(
      mapState,
      mapDispatch
    )(Game);

  • 相关阅读:
    断开/删除 SVN 链接(.svn)的几种方法
    Android 中 ListView 常用属性合集
    Android 中 GridView 常用属性合集
    LeetCode-387-字符串中的第一个唯一字符
    LeetCode-374-猜数字大小
    LeetCode-290-单词规律
    LeetCode-278-第一个错误的版本
    LeetCode-383-赎金信
    LeetCode-367-有效的完全平方数
    LeetCode-350-两个数组的交集 II
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10363023.html
Copyright © 2011-2022 走看看