react项目中使用状态管理_react provide store-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40609692/article/details/106621635

本文详细介绍了在React项目中如何集成并使用Redux进行状态管理。从安装redux和react-redux开始，接着创建store目录，并在应用的顶层使用Provider组件进行包裹。接着展示了在组件中如何通过connect函数获取和更新state，利用dispatch触发action。文章还深入讲解了如何通过combineReducers合并多个reducer，以及如何编写和使用异步action来触发dispatch操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装 redux

2. 安装 react-redux

import { createStore } from 'redux'

// 1. 定义
const notices = (state = { isAllRead:false, count: 8 }, action ) => {
  switch (action.type) {
    case "Read_All":
        return {...state, isAllRead:true }
    default:
      return state
  }
}

// 2. 创建
const store = createStore (notices)

export default store

4. 在react更节点中使用 provide

// 1. 引入provider
import { Provider } from 'react-redux'
// 2. 引入store
import store from './store/index'

// 3. 导入数据
<Provider store={store}>
...
</Provider>

5. 在组件中使用

// 导入connect 连接组件
import { connect } from 'react-redux'

// 1. 使用mapStateToProps 将store 数据派发给props中
const mapStateToProps = (state, ownProps) => {
  return {
    all:state.isAllRead
  }
}

// 2. 建组件进行连接
export default connect( mapStateToProps )(index)

6.dispatch 触发

<button onClick={() => { props.dispatch({type:'Read_All'})}} > 切换</button>

7. 多个reduce合并 combineReducers

import { createStore, combineReducers } from 'redux'
import norices from './reducers/norices'
import products  from './reducers/products'

//1.合并reducers

const rootReducers = combineReducers( {
  norices,
  products
})
// 2. 创建
const store = createStore (rootReducers)

export default store

8. 使用异步action 触发dispatch

1. 修改store/index.js

import { createStore, combineReducers, compose, applyMiddleware } from 'redux'
import norices from './reducers/norices'
import products  from './reducers/products'
import thunk from 'redux-thunk'

//1.合并reducers

const rootReducers = combineReducers( {
  norices,
  products
})
// 2. 创建
const store = createStore (rootReducers, compose(applyMiddleware(...[thunk])))

export default store

2. 创建actions/products.js

export const loadProduct = (payload) => {

  // 调用参数
  console.log(payload);
  
  return async dispatch => {
    const res = await getapi()   /// 请求数据
    // 当异步操作完成之后通过dispatch触发reduces 改变
    dispatch({
      type:'PRODUCTS_LIST',
      payload:res
    })
  } 
}

3. 使用

import React,{ useEffect} from 'react'
import {connect} from 'react-redux'
import { loadProduct } from '../../../store/actions/products'

function index(props) {
  useEffect(() => {
    // 触发
    props.dispatch(
      loadProduct({
        page:1  // 参数
      })
    )
  },[props])
  return (
    <div>
      列表
    </div>
  )
}

const mapStateToProps = (state) => {
  return state
}
export default connect(mapStateToProps)(index)