Simple use of Redux and React-Redux

A simple example of using Redux in the React project

Scaffolding the create – react – app

1. Install the story

npm install redux --save

2. Allocate files to the redux store directory

-- action.js action --reducers Computing attribute collection folder -- index.js computing module exit -- user.js computing module 1 -- test.js computing module 2 -- Store.js Redux Store exit -- Type.js Action Specifies the type of the action nameCopy the code

Structure of the case

3. The store code

1. Action.js Action integration module

 
import types from '.. /type.js';
 
// The View encapsulates as many messages as the View wants to send
 
// Call the computed property in user.js
export const userAction=(data) = >({type:types.USER,data});
 
// Call the computed property in token
export const userTokenAction=(data) = >({type:types.TOKEN,data});
 
 
 
Copy the code

Type. js constant name category encapsulation

 
export default  {
    TOKEN:'TOKEN'.USER:'USER'.USER_NAME:'USER_NAME',}Copy the code

3. Reducers Computing attribute integration

User.js computing module 1 (PS: whether the js file of the computing module is divided into multiple files or written as a single file depends on your own requirements, here is an example to write only one file,token. Js and user.js are consistent)

import { createStore,combineReducers } from 'redux';
import _type from '.. /type.js';
 
// The reducer function will accept two parameters, one is state and the other is action
const initState = 'Initialize value';
export default  function User(state = initState ,action){
        const {type,data} =action;
        // console.log(" trigger ____");
        switch(type){
            case _type.USER:
            // It is better to have newly generated data
            return{... data};case _type.USER_NAME:
            return '111';
            case _type.TOKEN:
            return state + '222';
            default:
            returnstate; }}Copy the code

Index. js Exits the computing module

import { createStore,applyMiddleware,combineReducers} from 'redux';
import User  from './user'; 
import Token  from './token'; 
 
// Merge multiple Reducers
const allReducers=combineReducers({
    user:User,
    token:Token,
});
 
export default allReducers;
Copy the code

4. The story is derived

import { createStore,applyMiddleware,combineReducers} from 'redux';
import allReducers from './reducers/index';
 
export default createStore(allReducers);// Create a data warehouse
 
 
Copy the code

5. Integration of project entry

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import serviceUrl from  './service/url';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
import store from './redux/store';
 
ReactDOM.render(
  <React.StrictMode>
     <Provider store={store}>
       <App />
     </Provider>
  </React.StrictMode>.document.getElementById('root')); reportWebVitals();Copy the code

4. Use it on your page

import React,{component} from 'react';
import './index.scss';
import { Form, Input, Button, Checkbox,message } from 'antd';
import { Row, Col } from 'antd';
import Config from '.. /.. /utils/config';
import { HttpRequest,HttpStatus } from '.. /.. /service/http';
import Url from '.. /.. /service/url';
import md5 from 'js-md5';
import {  Link } from "react-router-dom";
import {connect} from 'react-redux'
import { userTokenAction,userAction } from '.. /.. /redux/actions/action';
 
 
 class Login extends React.PureComponent {
    constructor(props){
        super(props);
        
    }
   
    // Call the redux method
    onFinish = (values) = > {
        
        this.props.userToken(11111 || null);
        this.props.userAction(22222 || null);
    };  
    
    
    
    render() { 
     return  <div>{this.props? The token | | 'temporarily no data}<button onClick={()= >{this.onFinish}}> Fires the redux method</button>
     </div>}}// Redux store value exposed
const mapStateToProps=(state) = >{
    return {
        token:state.token,
    }
};
 
// Redux method is exposed
const mapDispatchToProps = (dispatch) = > {
    return {
        userToken:(token) = >{
            dispatch(userTokenAction(token))
        },
        userAction:(data) = >{
            dispatch(userAction(data))
        }
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);
Copy the code