Introduction to Redux: initial experience of Redux

preparation

1. structure React project

npx create-react-demo redux-app

2. stay Pages Under the table of contents , establish home Components

cd src;mkdir pages/home;cd . > pages/home/index.js

modify pages/home/index.js

import React from 'react'

export default class Home extends React.Component {
    
    render(){
    
        return (
            <button>Press me,send an action</button>
        )
    }
}

3. stay App.js Introduce this component in

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './pages/home'

function App() {
    
  return (
    <div className="App">
        <Home/>
    </div>
  );
}

export default App;

Building objects

structure Action

1. Create a folder in the root directory action
2. Create... In this directory index.js file , Used to build Action
3. stay action Create a function inside , utilize return, Return to one action object , Be careful to carry type attribute
4. Put this action Create function export

const sendAction=()=>{
    
    return{
    
        type:"send_type",
        value:'i am an action'
    }
}
module.exports = sendAction

structure Reducer

1. Create a folder in the root directory reducer
2. Create... In this directory index.js file , Used to build Reducer, Receive two parameters
3. The first parameter is state, Define initialization state, assignment
4. Function to determine the second parameter action Of type Whether the value is what we sent
5. If it is , Return to new state
6. hold reducer Export

const initState = {
    
    value:'default'
}
const reducer = (state=initState,action) => {
    
    console.log("ruducer:",state,action)
    switch (action.type) {
    
        case 'send_type':
            
            return Object.assign({
    },state,action);
    
        default:
            return state;
    }
}

module.exports = reducer

structure store

1. Create a folder in the root directory store
2. Create... In this directory index.js,
3. Import the reducer
4. createStore The return value of is built store, export

import {
     createStore }  from 'redux'
import reducer from '../reducer'

const store = createStore(reducer)

export default store

Use

1. For the page button Button to bind a click event

import React from 'react'
import store from '../../store'
import sendAction from '../../action'

export default class Home extends React.Component {
    
    handleClick = () => {
    
        const action = sendAction()
        store.dispatch(action)
    }
    render(){
    
        return <button onClick={
    this.handleClick}>Press me,send an action</button>
    }
}

In order to carry on console notice state and action, modify reducer as follows

const initState = {
    
    value:'default'
}
const reducer = (state=initState,action) => {
    
    console.log("ruducer:",state,action)
    switch (action.type) {
    
        case 'send_type':
            
            return Object.assign({
    },state,action);
    
        default:
            return state;
    }
}

module.exports = reducer

2. Once the component is loaded , adopt store Register the listener , The return value can be used to log off listening

import React from 'react'
import store from '../../store'
import sendAction from '../../action'

export default class Home extends React.Component {
    
    handleClick = () => {
    
        const action = sendAction()
        store.dispatch(action)
    }
    componentDidMount(){
    
        store.subscribe(()=>{
    
            console.log("Subscribe:",store.getState())
        })
    }
    render(){
    
        return (
            <>
            <button onClick={
    this.handleClick}>Press me,send an action</button>
            <div>{
    store.getState().value}</div>
            </>
        )
    }
}

3. In the click event handler , adopt store.dispatch To send a action

Make the page appear state Return result of

import React from 'react'
import store from '../../store'
import sendAction from '../../action'

export default class Home extends React.Component {
    
    handleClick = () => {
    
        const action = sendAction()
        store.dispatch(action)
    }
    componentDidMount(){
    
        store.subscribe(()=>{
    
            console.log("Subscribe:",store.getState())
            this.setState({
    })
        })
    }
    render(){
    
        return (
            <>
            <button onClick={
    this.handleClick}>Press me,send an action</button>
            <div>{
    store.getState().value}</div>
            </>
        )
    }
}

At this point you can start Project preview effect