创建 React App with Redux - Shell/Bash

React is one of the most popular JavaScript libraries for building user interfaces. It provides developers with a component-based architecture and a virtual DOM, which make it easier to create complex UIs that are efficient and easy to reason about.

Redux is a predictable state container for JavaScript apps. It helps you manage complex state and side effects in your app by providing a single source of truth for your application state.

In this tutorial, we will create a new React app that includes Redux as a state management tool.

Prerequisites

To follow this tutorial, you need to have the following installed on your system:

• Node.js
• npm
• create-react-app

Step 1: Creating a New React App

To create a new React app, we will use the create-react-app tool. This tool creates a new React app with all the necessary dependencies and settings.

To create a new React app, run the following command:

npx create-react-app my-app

Replace my-app with the name of your app.

Step 2: Installing Redux

To use Redux in our app, we need to install two packages:

• redux
• react-redux

To install these packages, run the following command in your app's root directory:

npm install redux react-redux

Step 3: Setting up the Redux Store

The Redux store is the single source of truth for your application state. It holds the entire state tree of your app, and you can access it via the getState() method.

To set up the Redux store, we need to create a new file called store.js in the src folder of our app, and add the following code:

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

In this code, we create a new store using the createStore() method from the redux package, and pass our root reducer as an argument.

Next, we need to create our root reducer. A root reducer is a function that takes the current state of our app and an action, and returns the new state of our app after the action has been performed.

Create a new file called reducers.js in the src folder of our app, and add the following code:

const initialState = {};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

export default rootReducer;

In this code, we define an initial state for our app, and create our rootReducer function using the switch statement. This function takes the current state of our app and an action, and returns the new state of our app after the action has been performed.

Step 4: Connecting Redux to our App

To connect Redux to our app, we need to add the Provider component from the react-redux package to the root component of our app.

Open index.js in the src folder of our app, and add the following code:

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')
);

In this code, we import the Provider component from the react-redux package, and wrap our App component with it. We also pass our Redux store as a prop to the Provider component.

Step 5: Testing Redux

To test Redux in our app, we can create a simple action that modifies the state of our app.

Open reducers.js in the src folder of our app, and modify the rootReducer function as follows:

const initialState = {
  counter: 0,
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return {
        ...state,
        counter: state.counter + 1,
      };
    default:
      return state;
  }
}

export default rootReducer;

In this code, we define an initial state for our app with a counter property, and add a new case statement to our rootReducer function that increments the counter by one.

Next, open App.js in the src folder of our app, and modify the render method of the App component as follows:

render() {
  return (
    <div className="App">
      <h1>Counter: {this.props.counter}</h1>
      <button onClick={this.handleClick}>+</button>
    </div>
  );
}

handleClick = () => {
  this.props.incrementCounter();
}

In this code, we display the value of the counter property in our app, and add a button that triggers a new action that increments the counter.

Finally, open AppContainer.js in the src folder of our app, and add the following code:

import { connect } from 'react-redux';
import { incrementCounter } from './actions';
import App from './App';

const mapStateToProps = state => {
  return {
    counter: state.counter,
  };
};

const mapDispatchToProps = {
  incrementCounter,
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

In this code, we connect our App component to the Redux store using the connect function from the react-redux package. We also define a mapStateToProps function that maps the state of our app to props of our App component, and a mapDispatchToProps function that maps our action creator to props of our App component.

Conclusion

In this tutorial, we created a new React app that includes Redux as a state management tool. We set up the Redux store, connected Redux to our app, and tested Redux by creating a simple action that modifies the state of our app.