Redux is a simple react state management solution

There are many react state management solutions. The simplest and most commonly used is Redux.

Redux implementation

Redux does state management, which is to update the state implemented by reducer and action. If you want to use Redux, there are several steps

1. actions

Create actions. Js

// actions.js
export const SET_NAME = 'SET_NAME';
export const setName = (name) = > {
    return {
        type: SET_NAME,
        name,
    }
}
Copy the code

2. reducer

Create reducers. Js

// reducers.js
import {SET_NAME} from './actions';
const nameState = (state = ' ', action) = > {
    switch(action.type) {
        case SET_NAME: {
            return action.name;
        }
        default: {
            returnstate; }}}export default nameState;
Copy the code

3. The entrance,

Entry file for the project

// index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './App'

const store = createStore(rootReducer)

render(
  <Provider store={store}>
    <App />
  </Provider>.document.getElementById('root'))Copy the code

4. App component

Business component code

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {setName} from './actions';

class App extends Component {
    constructor(props) {
        super(props);
    }
    handleClick() {
        this.props.setName('Three and four')
    }
    render() {
        return (
            <div>
                {this.props.name}
                <button onClick={this.handleClick.bind(this)}>Modify the name</button>
            </div>)}}const mapStateToProps = (state) = > {
    return {
        name: state.name,
    };
};
const mapDispatchToProps = (dispatch) = > {
    return{ setName(name) { dispatch(setName(name)); }}}export default connect(mapStateToProps, mapDispatchToProps)(App);

Copy the code

Redux implementation principles

Redux is a state management tool. React-redux enables react components to work with Redux.

Provider

A Provider is a higher-order component that needs to be in the outermost layer to enable a store to be shared by all its children.

connect

The Connect method connects the React component to the Store. The Connect method maps the state used by the component and the actions that need to be triggered to the properties of the React component.

See the react-redux documentation for details

Why not use Redux

Redux provides a very systematic and complete state management solution, with one sentence in the documentation:

By limiting when and how updates occur, Redux tries to make state changes predictable.

Because it is complete, it is relatively complex and requires more configuration. If you want an easier state management solution for small projects, ditch Redux and find another solution.

Xudox implementation

• To determine the usage
• Complete sample
• Introduction of the principle

To determine the usage

The goal is to be the easiest to use, so I might use it this way

// used in the component
import React, { Component } from 'react';
import {connect} from 'xubox';

class AA extends Component {
    constructor(props) {
        super(props)
    }
    handleClick() {
        // Attach the component to the setState$method, where the state value is directly changed
        this.props.setState$({
            name: 'Three and four'
        })
    }
    render() {
        return (
            <div>
                {this.props.name}
                <button onClick={this.handleClick.bind(this)}></button>
            </div>)}}As with redux, the function returns the state required by the component
const mapStateToProps = (state) = > {
    return {
        name: state.name,
    };
};

// The same as redux, except that mapStateToProps is passed as an argument
connect(mapStateToProps)(AA);
Copy the code

The code looks exactly like Redux, but without the Dispatch relief, instead changing state directly. What about other Settings? No Settings are required other than manually setting the initial state value.

Set the initial value of state

// Import file
import configureState from 'xubox';

configureState({
    name: localStorage.getItem('name') | |anonymous
});
Copy the code

Complete sample

1. Entrance to the file

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js'
import configure from 'xudux';
/ / the initial state
let state =  {
    name: anonymous}; configure(state); ReactDOM.render(<App />
, document.getElementById('root'));


Copy the code

2. In the component

app.js

import React, { Component } from 'react';
import { connect } from 'xudux';

class App extends Component {
    constructor(props) {
        super(props);
    }
    handleClick() {
        this.props.setState$({
            name: 'Three and four'}); } render() {return (
            <div>
                {this.props.name}
                <button onClick={this.handleClick.bind(this)}>Modify the name</button>
            </div>)}}const mapStateToProps = (state) = > {
    return {
        name: state.name,
    };
};

export default connect(mapStateToProps)(App);
Copy the code

State management is accomplished in two simple steps. The example renders the back view for state within a component. The view initiates an event to change state, and the state change causes the view to be re-rendered. The same is true for communication between multiple components.

Introduction of the principle

This section describes the principles of XUDUX. Connect forms a high-order component and listens for changes in state inside the high-order component. If state changes, it causes changes in the react component props that are passed in for rerendering. Redux probably follows the same logic.

The setState$method is an internal xudux state update method. Any component calling this method will trigger a state update in Xudux. The state update will be pushed to all components, and each component will determine whether its state has changed to determine whether the React component is updated.

At the end

If you’re interested, give Github a try