Story notes

Through reading teacher Ruan Yifeng’s Redux tutorial, FINALLY understand redux roughly, here to record. The following contents are for personal understanding. Http://image.statics/js/2012

Redux workflow

1. Component triggers functions in action (which can pass in data)
2. A function in an Action sends an action of the specified type to a store via dispatch (which can carry data)
3. The Store sends the received actions to the Reducer
4. Reducer receives the action and retrieves the action type and the data it carries
5. Reducer determines the action type and takes appropriate actions to return a new state to the store
6. The store receives the new state passed to the component
7. The component takes the view update action when it receives the update information

Counter the DemoStamp here

1. Create a React project using create-react-app

2. Install redux react – story

3. Install the Redux-Thunk middleware

4. Create the Store folder and create index.js

   import {createStore, applyMiddleware, compose} from 'redux'
   import reducer from '.. /reducers/index'
   import thunk from 'redux-thunk'
   const defaultState = {}
   const store = createStore(		// Call createStore to generate a store
       reducer,									// Pass the reducer into the reducer. This reducer can be a collection of multiple reducers
       defaultState,							// Pass in the default state
       compose(						
           applyMiddleware(thunk),			// Use thunk middleware to enable action to return a function (required)
           window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // Use a browser plug-in))export default store
   Copy the code

5. Introducing a Provider in index.js wraps the global App component and passes it to the Store

   import {Provider} from 'react-redux' import store from './store/index' ReactDOM.render( <Provider store={store}> <App />  </Provider>, document.getElementById('root') );Copy the code

6. Create the Components folder and define the Counter component

   import React, { Component } from 'react' import {connect} from 'react-redux' import {sub, add} from '.. /actions/action' export class Counter extends Component { render() { return ( <div> <button style={{fontSize: 30}} onClick={this.props. Sub} -</button> {/* this.props. Sub <span style={{padding: '0 30px'}}>{this.props. Num}</span> {/* this.props. <button style={{fontSize: 30}} onClick={this.props. Add}>+</button> </div>)}} const mapStateToProps = state => { Store is equivalent to a large state, which contains a number of small states (reducer. Js), which contain their own data return {num: State. Num}} export default connect(mapStateToProps,{sub, add})(Counter) // The connect method passes in the mapStateToProps and mapDispatchToProps parameters, both of which are objects. If you want to convert state to props, you can use this.props. XXX to get the data in the state. This data is reactive and is updated whenever the state changes. // mapDispatchToProps Converts the method in the action to props, which can be called through this.propsCopy the code

7. Introduce the Counter component in app.js

   import React from 'react';
   import './App.css';
   import Counter from './components/Counter'
   function App() {
     return (
       <div className="App">
         <header className="App-header">
           <Counter></Counter>
         </header>
       </div>
     );
   }
   export default App;
   Copy the code

8. Create actinos folders to store method files that need to be defined in each component

9. Create actionstypes. js file in the Actinos folder to store the actions and reducer directives

   export const ADD = 'ADD'
   export const SUB = 'SUB'
   Copy the code

10. Create an action.js file in the Actions folder to store the various methods

    import {ADD, SUB} from './actionsTypes'
    export const sub = (a)= > dispatch => {	// define a function minus 1 that returns a function of dispatch
        console.log('Triggered sub')
        return dispatch({						// Reduce action dispatch to reducer.
            type: SUB
        })
    }
    
    export const add = (a)= > dispatch => {
        console.log('Triggered add')
        return dispatch({
            type: ADD
        })
    }
    Copy the code

11. Create a reducers folder to store each Reducer, and each reducer equals a sub-state

12. Create an index.js file under the reducers folder to merge all the Reducer files

    import { combineReducers } from "redux";	// Introduce the combinReducers function to merge multiple reducers
    import reducer from './reducer'
    export default combineReducers({
        reducer
    })
    Copy the code

13. Create the reducer.js file under the Reducers folder

    import {ADD, SUB} from '.. /actions/actionsTypes'
    const initState = {																// Initialize a state
        num: 0
    }
    export const reducer = (state = initState, action) = > { // Each reducer function receives state and action, which are sent from the action
        console.log('Triggered reducer')
        switch(action.type) {
            case ADD:										// Determine the action type and perform the corresponding operation to return the new state to the store
                return {
                    num: state.num+1
                }
            case SUB:
                return {
                    num: state.num- 1
                }
            default:
                return state
        }
    }
    export default reducer
    Copy the code