如何创建 React Redux 项目

React Redux 是一个用于管理 React 应用程序状态的库。通过它，我们可以创建更健壮、更可复用的应用程序。本文将介绍如何在 JavaScript 中创建一个 React Redux 项目。

环境搭建

在开始创建 React Redux 项目之前，我们需要先安装环境：

1. 安装 Node.js，官网链接：https://nodejs.org/zh-cn/
2. 安装 create-react-app 工具，命令如下：

npm install -g create-react-app

创建 React Redux 项目

接下来，我们将创建一个名为 my-react-redux-app 的项目：

1. 在终端中执行以下命令：

create-react-app my-react-redux-app

2. 进入项目目录：

cd my-react-redux-app

3. 安装 redux 和 react-redux 库：

npm install redux react-redux

编写代码

1. 在 src 目录下创建一个名为 reducers.js 的文件，编写以下代码：

const initialState = {}

function reducer(state = initialState, action) {
  switch (action.type) {
    // 在这里添加 action 处理代码
    default:
      return state
  }
}

export default reducer

2. 在 src 目录下创建一个名为 store.js 的文件，编写以下代码：

import { createStore } from 'redux'
import reducer from './reducers'

const store = createStore(reducer)

export default store

3. 在 src 目录下创建一个名为 App.js 的文件，编写以下代码：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

class App extends Component {
  render() {
    return (
      // 在这里编写你的组件代码
    )
  }
}

function mapStateToProps(state) {
  return { state }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ 
    // 在这里添加 action 到 props 映射代码
  }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

将 store 传递给应用程序

1. 在 src/index.js 文件中引入 store：

import store from './store'

2. 在 index.js 中将 store 传递给组件：

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

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

总结

在本文中，我们介绍了如何在 JavaScript 中创建一个 React Redux 项目。通过安装环境、创建项目、编写代码以及将 store 传递给应用程序，我们可以开始构建更健壮、更可复用的应用程序了。