Reacting a TODOLIST with Redux Central Warehouse

Example of this article shared ReDux to implement a TODOLIST’s specific code for everyone to realize the specific code of TODOLIST. For your reference, the specific content is as follows

react用Redux中央仓库实现一个todolist

Redux brief introduction

Redux is a JavaScript application tool for managing management data status and UI status. As JavaScript single-page applications (SPA) development is more complex, JavaScript needs to manage State (status) than at all times, Redux is to reduce management difficulty. (Redux support react, angular, jquery even pure javascript)

Redux devooking plugin Redux debugging tool Google Store download

Redux three pits:

The Store warehouse must be unique, multiple Store is resolutely not allowed, only one Store space

Only the Store can change its own content, reducer can’t change

Reducer must be a pure function

Redux-thunk This REDUX is most commonly used:

After the Dispatch an action, some additional operations can be used before reaching the Reducer, and MiddleWare is required. Middleware)

In practice, you can use the middleware to log records, create crash reports, call asynchronous interfaces or routing

npm install –save redux-thunk

Warehouse New Index.js // ApplyMiddleWare, compose is import {with the following two plug-ins. CreateStore, ApplyMiddleWare, Comply} from ‘Redux’ // Introduces ReduxImport Thunk from ‘Redux-Thunk’ // Introduction REDUX Middleware Plugin Import Reducer from ‘./Reducer’ // Reference Data // Browser Install in Reducer plug-in debug panel const composeEnhancers = window .__ REDUX_DEVTOOLS_EXTENSION_COMPOSE__ window .__ REDUX_DEVTOOLS_EXTENSION_COMPOSE __ ({}):? compose // redux middleware plug-in function for compatibility with two plug-in parallel const enhancer = composeEnhancers (applyMiddleware (thunk)) // define a unique warehouse There is no two warehouse CreateStore warehouse to receive only two parameters const store = createstore (reducer, enhance) // Create a data storage warehouse Export Default Store // Export warehouse

  New reducer.js to do warehouse data processing  

Import {add_item, delete_item, get_list} from ‘./ActionTypes’ // Define TYPE Type JS file const defaultState = {Value : ‘sss’, list: [] // List data acquired by the backend} // state: Refers to the state in the original repository. // Action: Refers to the new state of the Action. ExporT default (state = defaultState, action) => {// console.log (state) // reduction can only receive State // if (action.type === “changeinput”) {// let newstate = JSON.PARSE (JSON.STRINGY (State)) // Deep copy State’s value to a string assignment to a variable // newState.Value = action.vlaue // Change the value of the PlaceHold is equal to the value of the user // Return NEWSTATE // Put the new state return out //} // increase if (action.type =============================================================================================== List.push (action.value) // User Enter new content Push new content to the list to console.log (action) newState.Value = ” // After increasing the return newState} // Remove if (Action.) Type === delete_item) {let news = json.parse (json.stringify (state) newstate.list.splice (action.index, 1) // Remove the corresponding value Return NewState} // back end Get data in the array Pass to the central warehouse to process IF (Action.TYPE === GET_LIST) {let newstate = json.parse (json.stringify (state) newstate.list = action.data return.com

  ACTIONTYPES .js centralized management page Reducer's TYPE type  
// Concentrates the management page ketus type export const address_Item = “addItem” // Define constant generally use capital const delete_Item = “deleteItem” export const GET_LIST = “getListAction”
ActionCreators.js encapsulation assembly Action

 // ActionImport {add_item, delete_item, get_list} from './ActionTypes from' // definition type of JSIMPORT AXIOS from 'AXIOS' // ComponentTypes from '// ComponentTypes from' AXIOS '// Component Type is already sealed, so it is used as a parameter arrow function (Value ) => Boiled to // Add data export const address = (value) => ({type: add_item, value}) // Remove Data Export const deleteItem = (index) => ({type: delete_item, Index}) // Get Data Export Const getListAction = (DATA) => ({type: get_list, data}) Export const Gettodolist = () => {return (dispatch) => {AXIOS.Get ('https: / / www.easy-mock.com/mock/5d63d7ca5774121e1a634378/demo1/demo1 ') .Then ((res) => {const data = res. daita.data; const action = getListivity (data) dispatch // Action This value is transmitted to the warehouse}) .catch ((error) => {console.log (error)}}}   
Todolist.js component JS part

Import React, {Component} from ‘React’; import Todolistui from ‘./todolistui’ // Component UI Part From ‘../store/index’ // Get the data in the Store // Import {add_item, delete_item} from ‘../store/ActionTypes’ // Define TYPE Type JS In order to more easily check the error write error report error Import {additem, deleteItem, gettodolist} from’ ./ store / ActionCreators’ // Package Action // Write Todolist Extends Component {Constructor () // CONSOLE.LOG (Store.getState ()) // GetState ()) // GetState method The value of the warehouse this.State = store.getState () // Assign the component state data this.changeinputvlaue = this.changeinputvlaue.bind (this) // THIS = this Bind this.StoreChange = this.storeChange. Bind (this) this.clickbtn = this.clickbtn.bind (this) this.deleteItem = this.deleteItem.bind (this) Store.Subscribe (this.storeChange) // Subscription Mode When the data is synchronized to make data change in the warehouse } render () {return (
);} ComponentDidMount () {// Axios.get ('https://www.easy-mock.com/mock/5d63d7ca5774121e1a634378/demo1/demo1') ///// .Then ((res) => // {// const Data = res.data.data; // const action = getListAction (data) // get the data enclosed action // store.dispatch (action) // transmitted to the reducer //}) // .catch ((error) => {// console.log (error ) //}) const action = getTodoList () // middleware acquires the data store.dispatch (action) //} // pass warehouse value input by the user to pass through the warehouse dispatch () method is passed to Store @ Action is an object, the object generally has two properties, Action is a description of a first, the second value is to be changed. // Method canceled before, in the finished copy reducer in the deep inside of the state data, the user input can not be assigned to the sync state changeInputVlaue (e) {this.setState ({value: e.target.value // tied to the value input by the user to the warehouse in a given value, the user input monitor}) // const action = {// type: 'changeInput', // name // value: e.target.value // value //} // store.dispatch ( action)} // state value and each component synchronizing changes storeChange () {this.setState (store.getState ())} // increase change list because there is no central data warehouse to do so is passed to the component data warehouse data warehouse and then return to the display assembly clickBtn () {// console.log (this.State.Value) // const action = {// type: add_item, // value: this.state.value // Get User Value for PUSH / /} const same = additem (SSTATE.VALUE); store.dispatch (action)} // Delete deleteItem (index) {// const alternation = {// type: delete_item, // index // index biography remove the last //} const action = deleteItem (index) store.dispatch (action)}} export default TodoList used;   
TodoListUi.js UI part pulled into sub-components Component

// This file is used for the view and logic separation import react from ‘React’; import ‘antd / dist / //- introduces Ant Design UI Library Import {INPUT, Button, List} from ‘ANTD’ // Input INPUT Component // Status Component Improvement Performance Transform Component into Functions Const Todolistui = (Props) => {Return (
    
(INDEX)}}> {item}
)} // Each item />

); / / The front components on the renovation need to introduce Component // Class Todolistui Extens 200 // render () {// Return (//
// // [}
 //  // 
/ /
Increase // {this.props.deleteItem (INDEX)}}> {item}
)} // Each // /> // (
// //); //} //} Export Default TodolistUI;
The above is this article All of the content, I hope to help everyone's learning, I hope everyone will support Tumi Clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment