react项目中 怎么在一个store中管理数据

在一个React项目中，可以使用Redux或者MobX等状态管理库来管理数据。这些库可以帮助开发者创建一个全局的store来存储应用程序中的状态，这些状态可以被许多组件共享和访问。具体来说，可以按照以下步骤在Redux中创建一个store来管理数据：

1. 安装redux和react-redux依赖库

npm install --save redux react-redux

2. 创建一个reducer来处理数据，reducer是一个纯函数，它接收当前的state和一个action，根据action的类型返回一个新的state

const initialState = {
  data: [],
}

function dataReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_DATA':
      return {
        ...state,
        data: [...state.data, action.payload],
      }
    case 'REMOVE_DATA':
      return {
        ...state,
        data: state.data.filter(item => item.id !== action.payload.id),
      }
    default:
      return state
  }
}

3. 创建一个store，并将reducer传入

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

const store = createStore(dataReducer)

4. 在根组件中使用Provider来将store传递给所有的子组件

import { Provider } from 'react-redux'
import store from './store'

function App() {
  return (
    <Provider store={store}>
      <div>
        ...
      </div>
    </Provider>
  )
}

5. 在组件中使用connect函数来连接store和组件，并将需要的数据作为props传递给组件

import { connect } from 'react-redux'

function MyComponent({ data, addData }) {
  const handleAddData = () => {
    addData({ id: 1, name: 'data1' })
  }

  return (
    <div>
      <button onClick={handleAddData}>Add Data</button>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  )
}

const mapStateToProps = state => ({
  data: state.data,
})

const mapDispatchToProps = dispatch => ({
  addData: data => dispatch({ type: 'ADD_DATA', payload: data }),
})

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

以上就是在一个Redux中管理数据的基本步骤，通过这种方式，可以方便地管理应用程序中的状态，并且可以在任何组件中访问和更新数据。