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);

  • 相关阅读:
    如何安装vue-cli脚手架环境
    使用vw,vh对页面进行布局
    ParseChat聊天室应用项目源码
    不错的找茬游戏源码项目
    山寨山寨版手机安全卫士项目
    高仿精仿金山手机卫士源码项目完整版
    java斗地主游戏项目源码
    ios版塔防类游戏源码
    ios媒体视频播放器应用项目
    仿iphone动态萤火虫锁屏应用源码
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10363023.html
Copyright © 2011-2022 走看看