当在React项目中使用Redux，你需要安装redux和react-redux库。下面是一个简单的示例，展示了如何在React项目中集成Redux：
1.安装依赖库：
npm install redux react-redux
2.创建Redux store：
在项目的根目录下，创建一个名为store.js的文件，并编写以下代码：
点击查看代码
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;
3.创建reducers：
在项目中创建一个名为reducers.js的文件，并编写以下代码：
点击查看代码
// initialState
const initialState = {
count: 0
};
// reducer
const rootReducer = (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;
}
}
export default rootReducer;
4.创建actions：
在项目中创建一个名为actions.js的文件，并编写以下代码：
点击查看代码
export const increment = () => {
return {
type: 'INCREMENT'
};
}
export const decrement = () => {
return {
type: 'DECREMENT'
};
}
5.创建React组件：
在项目中创建一个React组件，并使用redux中的state和actions。例如，我们创建一个名为Counter的组件：
点击查看代码
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';
const Counter = () => {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => dispatch(increment())}>+</button>
<button onClick={() => dispatch(decrement())}>-</button>
</div>
);
}
export default Counter;
6.在应用中使用Redux：
在你的应用中使用Counter组件，并将Redux store与React应用程序集成在一起。例如，在根组件中添加以下代码：
点击查看代码
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';
const App = () => {
return (
<Provider store={store}>
<Counter />
</Provider>
);
}
export default App;