Mirror.js is simple, makes state management more convenient, no new API, worth using
Https://github.com/yurizhang/mirror
Package.json
{"Name": "Webpack", "Version": "0.1.0", "private": True, "dependencies": {"Axios": "^0.16.2", "cross-env": "^5.0.1", " Element-react ":" ^1.0.19 "," Element-theme-default ":" ^1.3.7 "," Isomorphic-unfetch ":" ^2.0.0 "," Mirrorx ":" ^0.2.5 "," Next ":" ^3.0.0-beta16 "," React ":" ^15.6.1 "," React-dom ":" ^15.6.1 "," React-redux ":" ^5.0.5 "," Redux ":" ^3.7.0 "}," Devdependencies ": {" react-scripts ":" ^1.0.7 "," Redux-devtools ":" ^3.4.0 "}," scripts ": {" dev ":" Node./server.js "," next _build ":" Next Build "," Next_start ":" Node./server-prd.js "," Start ":" React-scripts Start "," Build ":" React-scripts Build "," Test ":" React-scripts Test--env=jsdom "," Eject ":" React-scripts Eject "}}
Import React from ' React 'Import Mirror, {Actions, connect, render} from' Mirrorx '//declares Redux state, reducer, and action,//all actions will be assigned the same name to the global Action object .Mirror.model ({name:' App ', Initialstate: {total:1, list: [70,10]}, reducers: {//used to modify the stateIncrement (state,data) {Console.log ("State increment:" +data) Console.log (state) let list=state.list; Console.log (list) List.push (Math.floor (Math.random ()*100)); //Let tmparray=state.list | | []; return{//The return is the same as your state structure.Total:state.total+1, List:list}}, Decrement (state) {return{total:state.total-1, list: [88]}}, Effects: {Async Incrementasync () {//used to modify the state asynchronouslyAwaitNewPromise (Resolve, reject) ={setTimeout ()={resolve ()},1000) }) Actions.app.increment ()}}) Const app= Props + ={Console.log ("Props") Console.log (props)return ( <div id= "Counter-app" > )} const Mirror=connect (state ={Console.log ("State") Console.log (state)return{App:state.app,//Maptoprops the state as prop to render. //Total:state.app.total, //data:state.app.list}) (APP) render (<mirror/>, document.getElementById (' Mirror '))
Mirror.js a good tool to integrate redux