[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);
相关文章
- [Web] How to Test React and MobX with Jest
- React系列——websocket群聊系统在react的实现
- [systemd]How To Use Systemctl to Manage Systemd Services and Units
- electron+react
- [Poi] Use Markdown as React Components by Adding a Webpack Loader to Poi
- [React Intl] Install and Configure the Entry Point of react-intl
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- [React] Use React.cloneElement to Extend Functionality of Children Components
- [React] Use React Context to Manage Application State Through Routes
- [React Testing] Intro to Shallow Rendering
- [React] React Fundamentals: Component Lifecycle - Mounting Basics
- React项目使用reportWebVitals做性能监控
- [Typescript + React] Tips: Write your own 'PropsFrom' helper to extract props from any React component
- [AWS Amplify] Deploy Your React Application to AWS Using the Amplify CLI
- [React] Use react styled system with styled components
- [React] Using react-styleguidist for Component demo
- [React Recoil] Write a Custom Recoil Hook to Reset a Value in the Recoil State
- [React Recoil] Use a Recoil atom to share state between two React components
- [React + Functional Programming ADT] Connect State ADT Based Redux Actions to a React Application
- [React] Refactor a connected Redux component to use Unstated
- [Poi] Use Markdown as React Components by Adding a Webpack Loader to Poi
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- [React Testing] Intro to Shallow Rendering
- PAT 1033 To Fill or Not to Fill[dp]