React Redux Tutorial: How to use Redux to manage front-end state

React Redux Tutorial: How to Use Redux to Manage Front-End State
React is a very popular JavaScript library for building user interfaces. And Redux is a JavaScript library for managing application state. Together they help us better manage front-end state. This article will introduce how to use Redux to manage state in React applications and provide specific code examples.

1. Install and set up Redux

First, we need to install Redux and React Redux. Run the following command in the project directory to install the dependencies:

npm install redux react-redux

After the installation is complete, we need to set up the Redux store. In the root directory of the project, create a store.js file and add the following code:

import { createStore } from 'redux';

// 初始状态
const initialState = { count: 0 };

// Reducer函数
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

// 创建store
const store = createStore(reducer);

export default store;

This code creates an initial state of { count: 0 }'s store also defines a reducer function to handle state changes. When our application needs to increase the counter, it can send an action of { type: 'INCREMENT' }, and when it needs to decrease the counter, it can send an action of { type: 'DECREMENT' }.

2. Integrate Redux into the React application

Next, integrate Redux into our React application. Add the following code to the index.js file in the root directory:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

This code uses the Provider component provided by React Redux to pass the Redux store Giving the application's root component App, we can use Redux in any component that needs to read or modify state.

3. Use Redux in components

Now, we can use Redux in components to manage state. Next, we will create a Counter component that displays the counter status and provides buttons to increment and decrement the counter value. Create the Counter.js file in the project root directory and add the following code:

import React from 'react';
import { connect } from 'react-redux';

class Counter extends React.Component {
  increment = () => {
    this.props.dispatch({ type: 'INCREMENT' });
  };

  decrement = () => {
    this.props.dispatch({ type: 'DECREMENT' });
  };

  render() {
    return (
      <div>
        <h1 id="计数器-this-props-count">计数器：{this.props.count}</h1>
        <button onClick={this.increment}>增加</button>
        <button onClick={this.decrement}>减少</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { count: state.count };
}

export default connect(mapStateToProps)(Counter);

This code shows how to map Redux state to the properties of the component and how to dispatch it in the component action. By calling the connect function and passing the mapStateToProps function, we can map the { count: 0 } in the Redux store to the component's this.props. count attribute. This way, when the state of our application changes, the component will automatically update.

Finally, add the Counter component to the root component of the application App.js:

import React from 'react';
import Counter from './Counter';

class App extends React.Component {
  render() {
    return <Counter />;
  }
}

export default App;

Now, our React Redux application has been configured . When we open the app, we will see a counter component, and we can increase or decrease the counter value by clicking on the button.

Summary:

This article introduces how to use Redux to manage front-end state in React applications and provides specific code examples. By installing and setting up Redux, and then integrating Redux into a React application, we can easily manage and update the state of the application. I hope this article will help you understand the use of React Redux!

The above is the detailed content of React Redux Tutorial: How to use Redux to manage front-end state. For more information, please follow other related articles on the PHP Chinese website!