1. Achieve results
Above is the Count component and below is the Flag component.
In the Count component, click the +1 button to add the value by one. Click the reset button to clear the value and transfer the value to the Flag component for synchronous display.
In the Flag component, click Login to switch to true, click logout to switch to false, and pass the state to the Count component for synchronous display.
2. Install dependency packages
npm install react-redux redux redux-thunk redux-devtools-extension
Copy the code3. File structure
With Redux, you need to coat the UI component with a container component. Because of the parent-child relationship, the container component passes parameters to the UI component of the inner layer through props, placing the container component under the Containers folder.
To use Redux, you need to create separate Redux folders, including the Actions folder and reducers folder, as well as constant.js and store.js that expose constants externally.
4. Detailed code
1. Count component
(1) Component definition
The UI component is defined by class, and the container component is exposed. The container component passes state and methods to the UI component through props.
// src/containers/Count/index.jsx
import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { add, clear } from '.. /.. /redux/actions/count';
/ / UI components
class Count extends Component {
add = () = > {
/ / notice redux
this.props.add(1);
};
clear = () = > {
this.props.clear();
};
render() {
return (
<Fragment>
<h2>The current sum is: {this.props. Count}</h2>
<h3>Current Flag: {this.props. Flag? 'true' : 'false'}</h3>
<button onClick={this.add}>Click on the + 1</button>
<button onClick={this.clear}>reset</button>
</Fragment>); }}// Expose container components
export default connect(
/ / 1. The state
state= > ({ count: state.sum, flag: state.flagState }),
/ / 2. Methods
{ add, clear }
)(Count);
Copy the code(2) Create action
This file is used to create action objects.
// src/redux/actions/count.js
// Create action objects for the Count component
// Introduce constants
import { ADD, CLEAR } from '.. /constant';
// Create a function with an action object
export const add = data= > ({
type: ADD,
data,
});
// Create a function that clears the action object
export const clear = data= > ({
type: CLEAR,
data,
});
Copy the code(3) the reducer
This file is used to determine the type of type and process data.
// src/redux/reducers/count.js
Create a reducer for the Count component
Reducer receives two parameters: preState of the previous state and action object Action
import { ADD, CLEAR } from '.. /constant.js';
// Set the initial state
const initState = 0;
export default function addReducer(preState = initState, action) {
// Get type and data from action
const { type, data } = action;
// How to process data according to type
switch (type) {
case ADD:
return preState + data;
case CLEAR:
return 0;
// Initialize the action
default:
returnpreState; }}Copy the code2. The Flag components
(1) Component definition
// src/containers/Flag/index.jsx
import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { login, logout } from '.. /.. /redux/actions/flag';
class Flag extends Component {
login = () = > {
this.props.login();
};
logout = () = > {
this.props.logout();
};
render() {
return (
<Fragment>
<h2>Current Flag: {this.props. Flag? 'true' : 'false'}</h2>
<h3>The current sum is: {this.props. Count}</h3>
<button onClick={this.login}>login</button>
<button onClick={this.logout}>logout</button>
</Fragment>); }}export default connect(state= > ({ flag: state.flagState, count: state.sum }), { login, logout })(
Flag
);
Copy the code(2) Create action
// src/redux/actions/flag.js
// Create an action object for the Flag component
// Introduce constants
import { LOGIN, LOGOUT } from '.. /constant';
// Create a function with an action object
export const login = data= > ({
type: LOGIN,
data,
});
// Create a function with an action object
export const logout = data= > ({
type: LOGOUT,
data,
});
Copy the code(3) the reducer
// src/redux/reducers/flag.js
Reducer receives two parameters: preState of the previous state and action object Action
import { LOGIN, LOGOUT } from '.. /constant.js';
// Set the initial state
const initState = false;
export default function addReducer(preState = initState, action) {
const { type } = action;
switch (type) {
case LOGIN:
return true;
case LOGOUT:
return false;
default:
returnpreState; }}Copy the code3. Summarize all the reducer
The reducer of all components is summarized into a file and the state objects stored in redux are exposed.
// src/redux/reducers/index.js
Compile all reducer files
import { combineReducers } from 'redux';
import sum from './count';
import flagState from './flag';
export default combineReducers({
sum,
flagState,
});
Copy the codeConstant files
// src/redux/constant.js
export const LOGIN = 'login';
export const LOGOUT = 'logout';
export const ADD = 'add';
export const CLEAR = 'clear';
Copy the code5. store
Introduce the summarized Rudecer and expose the Store.
// src/redux/store.js
// There is only one store object for the entire document
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import allRudecers from './reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
/ / store
export default createStore(allRudecers, composeWithDevTools(applyMiddleware(thunk)));
Copy the code6. Project entry file index.js
Import store and wrap
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import store from './redux/store';
import { Provider } from 'react-redux';
ReactDOM.render(
// Provider wraps App so that all descendants of App container components can receive store
<Provider store={store}>
<App />
</Provider>.document.getElementById('root'));Copy the code