[React + Functional Programming ADT] Connect State ADT Based

发布时间：2020-12-15 20:34:47 所属栏目：百科来源：网络整理

导读：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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!