快速搭建react+redux+antd

为了快速搭建一个使用 React、Redux 和 Ant Design 的项目，你可以使用 Create React App 作为起点，并添加 Redux 和 Ant Design 的依赖。以下是步骤和示例代码：

• 使用 Create React App 创建一个新项目：

npx create-react-app my-app

cd my-app

• 安装 Redux 和 React Redux：

npm install redux react-redux

• 安装 Ant Design：

npm install antd

• 设置 Redux store。在项目的 src 目录下创建一个 store.js 文件，并初始化 Redux store：

// store.js
import { createStore } from 'redux';

// 定义一个简单的reducer

function counterReducer(state = { count: 0 }, action) {

switch (action.type) {

case 'INCREMENT':

return { count: state.count + 1 };

case 'DECREMENT':

return { count: state.count - 1 };

default:

return state;

}

}

const store = createStore(counterReducer);

export default store;

• 在 src/index.js 文件中，使用 react-redux 的 Provider 组件包裹根组件，将 store 传入：

// index.js

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

);

• 最后，在 src/App.js 文件中，使用 Redux 的 useSelector 和 useDispatch 钩子以及 Ant Design 组件创建一个简单的计数器应用：

// App.js

import React, { useState } from 'react';

import { Button, Card } from 'antd';

import { useSelector, useDispatch } from 'react-redux';

function App() {

const count = useSelector(state => state.count);

const dispatch = useDispatch();

return (

<Card style={{ width: 300 }}>

<p>Count: {count}</p>

<Button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</Button>

<Button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</Button>

</Card>

);

}

export default App;