The components of redux

The simplest case

We implement a basic button click plus or minus operation

store/index.js

import { createStore } from 'redux';

const countReducer = (state = 0, action) = > {
    const {type, payload} = action
    switch(type) {
        case 'ADD':
            return state + payload;
        case 'MINUS':
            return state - payload;
        default:
            return state
    }
}
const store = createStore(
    countReducer
)
export default store;
Copy the code

Start by creating a store

ReduxPage.js

import React, { Component } from 'react'
import store from '.. /store/'

export default class ReduxPage extends Component {
    componentDidMount() {
        this.unsubscribe = store.subscribe((a)= > {
            this.forceUpdate()
        })
    }
    componentWillUnmount() {
        if(this.unsubscribe) {
            this.unsubscribe()
        }
    }
    add = (a)= > {
        store.dispatch({type: 'ADD'.payload: 1})
    }
    minus = (a)= > {
        store.dispatch({type: 'MINUS'.payload: 1})
    }
    render() {
        return(
            <div>
                <h3>Reduxpage</h3>
                <p>{store.getState()}</p>
                <button onClick={this.add}>Synchronous +</button>
                <button onClick={this.minus}>Synchronous -</button>
            </div>)}}Copy the code

Okay, so we’ve implemented redux. It’s as simple as that. It is important to listen for updates, otherwise you will not be able to update the CONTENT of the Dom.

Let’s review the basic process again: The store has a pure counterReducer, it passes state, it returns the new state, it defines the rules to modify the state, and then it injects the counterReducer into the store. We can then use some of the methods defined by the store to do something. In reduxpage.js, we use the store.getState() method to access the value of state. When the button is clicked, we trigger an ation via store.dispatch, which the counterReducer receives. When state is updated,store.subscribe() listens for the change in state, and then updates the Dom with this.forceUpdate(). A complete Redux does what it’s supposed to do.

Enter the source code below, we go to see the concrete is how to achieve

The simplest source code

We need to implement a createStore class and then implement several methods inside it

Jredux/createStore.js

export default function createStore(reducer) {
    let currentState;
    let currentlistenrs = [];
    
    function getState() {
        return currentState;
    }
    function dispatch(action) {
        currentState = reducer(currentState, action)
        currentlistenrs.forEach(listener= > listener())
    }
    function subscribe(listener) {
        currentlistenrs.push(listener)
        return (a)= > {
            const index = currentlistenrs.indexOf(listener)
            currentlistenrs.splice(index, 1)}}/ / initialization
    dispatch({type: 'Jredux'});

    return {
        getState,
        dispatch,
        subscribe
    }
}
Copy the code

As simple as that, a redux source code is finished, we can also use the above code to achieve the operation of button addition and subtraction.

Refer to the link

  • This article source code

Next to share

Redux asynchronous way | redux (3)