React+redux Tutorial (iv) Undo, Devtools, router

In the last lesson, we introduced some new syntax for ES6: React+redux Tutorial (iii) reduce (), filter (), map (), some (), every () 、... Expand Properties

Today we learn by interpreting Redux-undo's official sample code, using the Undo feature, Devtools functionality, and router in redux.

Example

This example is a counter program that contains counters, the Redux development tool on the right, and a route (but only the "/" address).

Source:

Https://github.com/lewis617/myReact/tree/master/redux-undo-boilerplate

Revoke

Implementing the Undo function is very simple, you just need to make your reducers can be undone. What does that mean? Look at the code

Reducers/index.js

 Import {combinereducers} from ' Redux ' import {increment_counter, Decrement_counter, Undo_counter, redo_counter} from  '.. /actions/counter ' import undoable, {includeaction} from  ' Redux-undo ' const rootreducer  = Combinereducers ({counter:undoable (counter, {FILTER:INCLU Deaction ([Increment_counter, Decrement_counter]), limit:  10, debug:  
   
    true  
     default  rootreducer 
   

We can add the Undo function to the specified reducer (counter) by using Redux-undo This package to provide us with undoable and includeaction. Filter is the action that chooses to filter, here we only undo redo add minus action, namely Increment_counter, Decrement_counter,
Limit is the number of times that debug is the debug code, Undotype and Redotype are undo redo action.

So I just need to trigger undo redo action to undo redo function, that's it!

Devtools

Next, we begin to learn to use devtools This function, what is Devtools? The essence of Devtools is actually a component. What can devtools do? Devtools can help us see the entire program's status and the entire program's triggered action log records. How do we install Devtools? First of all, we know that Devtools is a component, so we just put the devtools in the container to render it out?

Containers/devtools.js

/* eslint-disable */  ' react' redux-devtools' redux-devtools-log-monitor ' Redux-devtools-dock-monitor '/*eslint-enable*/default  Createdevtools (  <dockmonitor togglevisibilitykey= "H"               changepositionkey= "Q" >    <logmonitor/>  </DockMonitor>)

This is a reusable container code, it means that you can directly put this JS file, copy and paste into your project. This code we output a Devtools component.

Containers/root.js

/*Global __devtools__*//*eslint-disable*/import React, {Component, proptypes} from' React 'Import {Provider} from' React-redux 'Import {Router} from' React-router 'Import Configurestore from‘.. /store/configurestore 'Import Routes from‘.. /routes '/*eslint-enable*/Const Store=Configurestore ()functioncreateelements (history) {const elements= [    <router key= "Router" History={history} children={routes}/>  ]  if(typeof__devtools__!== ' undefined ' &&__devtools__) {    /*eslint-disable*/Const DevTools= require ('./devtools '))    /*eslint-enable*/Elements.push (<devtools key= "DevTools"/>)  }  returnElements}exportdefaultclass Root extends Component {static proptypes={history:PropTypes.object.isRequired} render () {return (      <provider Store={store} key= "Provider" > <div>{createelements ( This. Props.history)} </div> </Provider>    )  }}

This code, we put our exported DEVTOOLS component under the router component, but we added a typeof __devtools__!== ' undefined ' && __devtools__ The judgment, if the condition is established, we will render devtools, otherwise do not render. Doing so means that we can control devtools in the development environment and not display it in the production environment.

Is it possible to render it? Of course not! We also need to register in the store!

Store/configurestore.js

/*Global __devtools__*/Import {createstore, applymiddleware, compose} from' Redux '//ReducerImport Rootreducer from '. /reducers '//MiddlewareImport thunkmiddleware from ' Redux-thunk 'Import Promisemiddleware from' Redux-promise 'Import Createlogger from' Redux-logger 'Const Loggermiddleware=Createlogger ({level:' Info ', collapsed:true}) Const Enforceimmutablemiddleware= Require (' redux-immutable-state-invariant ') () Let Createstorewithmiddlewareif(typeof__devtools__!== ' undefined ' &&__devtools__) {const {persiststate}= Require (' Redux-devtools ') Const DevTools= require ('.. /containers/devtools ') Createstorewithmiddleware=Compose (Applymiddleware (Enforceimmutablemiddleware, Thunkmiddleware, Promisemiddleware, Logg Ermiddleware), Devtools.instrument (), Persiststate (Window.location.href.match (/[?&]debug_session= ([^&]+) \b/)) ) (CreateStore)}Else{Createstorewithmiddleware=Compose (Applymiddleware (Thunkmiddleware, Promisemiddleware)) (CreateStore)}/** * Creates a preconfigured store.*/Exportdefault functionConfigurestore (initialstate) {Const store=Createstorewithmiddleware (Rootreducer, initialstate)if(module.hot) {//Enable Webpack Hot module replacement for reducersModule.hot.accept ('.. /reducers ', () ={Const Nextrootreducer= require ('.. /reducers/index ') Store.replacereducer (Nextrootreducer)})}returnStore}

So far, devtools we have installed, it is so simple! It can be rendered, you can put it under the whole program!

Store Enhancer

Devtools.instrument () This line of code makes DevTools available! Some students will ask, this instrument () is what ghost? Officially known as the store enhancer, translation comes from the store, with the Applymiddleware is a category, are store-strengthening device. So what can the store builder do? Store builder can rebuild a better store to replace the previous base version of the store, so your program can add a lot of other features, such as Appllymiddleware can give your redux to add middleware, so that it can have asynchronous function, log function, etc.!

enforceimmutablemiddleware, Thunkmiddleware, Promisemiddleware, Loggermiddleware

Some students will ask, what isenforceimmutablemiddleware ? What do you use it for? This use prohibits you from changing the state. What the? Do not change state, how we update the status, Redux does not allow you to change states, in the reducer we have to return to a new state, rather than modify the original state!

What's that thunk? Thunk we have spoken in the React+redux tutorial (a) Connect, Applymiddleware, thunk, Webpackhotmiddleware.

So what is Promisemiddleware? This is also a middleware, like thunk, so that your action can have asynchronous functions. However, we can find that in this example, we do not use the two middleware thunk and Promisemiddleware , this example is a seed file, can be expanded on this basis, so the author written in advance two commonly used middleware, easy for us to use later!

So what does Loggermiddleware do for you? As the name implies, is used to record the log, when you add this middleware, you can see the relevant print log on the command line! Of course, you can run the program, remove the middleware, to compare the role of the observation it!

instrument () and compose ()

Unlike Applymiddleware, instrument () can only be used in the development environment and can only enable your devtools components! So we'll separate applymiddleware and instrument with commas, why? This is the compose notation, used to replace the previous function nesting!

Router

To put it simply, router is also a component, a component that attaches much importance to the graph, which can switch the view by switching the URL, in short it is a component. Since it is a component, we just have to render it out!

At the top we're going to render a router, the code in Containers/root.js, and we're not going to repeat the list of codes.

Then we start rendering the various views, here we have only one view, that is, the catalog is a "/" view, we render it out!

Routes.js

/* eslint-disable */  ' react' react-router './containers/app '* as containers from './containers '  /*eslint-enable*/  const {=default  (  <route component={app}>    <route path= "/" Component={counterpage}/>  </Route>)

We have exported a view of the components of this view that are counterpage. It's so simple!

Then we'll be in containers/root.js and render it to the router component!

<router key= "Router" History={history} children={routes}/>

We can see that we did not place the Devtools component in the routing component. This means that no matter how you switch views, Devtools is always rendered!

Of course there are a lot of React-router API, we just use a very small part, I do not recommend to read the API documentation, should be in the project, encountered in the query API documentation, so the use of the API will be more profound understanding!

React+redux Tutorial (iv) Undo, Devtools, router