[react] react-redux-基本使用 ===

目录

Provider

useSelector

useDispatch

react-redux-Provider

react-redux-useSelector-useDispatch

Reducer 的分离与合并-思路

Reducer 的分离与合并-实现

---

使用react-redux简化redux在react项目中的使用

步骤

1. 安装 npmi react-redux

2. 使用

   1. 按redux的要求，创建好store, reducer,action等等

   2. 从react-redux中引入 provider, useSelector, useDispatch来 操作 redux

内容 

Provider

• 用法：直接包装在根组件上。<Provider store={store}>

• 好处：相比react + redux，这样就不需要每个组件都引入store了

useSelector

• 用法：获取公共状态

• 好处：

  • 相比react + redux，不需要使用store.getState()了

  • state变化了，它会自动更新

• 格式：const 状态 = useSelector(store的数据 => 你需要的部分)

useDispatch

• 用法：派发action，修改数据

• 格式： const dispatch = useDispatch();    

•     dispatch(action) 

核心代码 

react-redux-Provider

Index.js

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
import { Provider } from 'react-redux'
import store from './store/index.js'
ReactDom.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

react-redux-useSelector-useDispatch

App.js

import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
export default function Son () {
  const [n, setN] = useState(12)
  const count = useSelector((state) => state)
  const dispatch = useDispatch()
  const add = () => {
    dispatch({ type: 'addN', payload: n })
  }
  return (
    <div style={{ border: '1px solid #ccc', margin: 10, padding: 10 }}>
      子组件
      {count}
      <button onClick={add}>+n</button>
      <input value={n} onChange={(e) => setN(e.target.value)} />
    </div>
  )
}

Reducer 的分离与合并-思路

问题

随着项目功能变得越来越复杂，需要 Redux 管理的状态也会越来越多。导致reducer函数越来越重。

例如，项目要管理图书和个人信息

解决思路

拆分。按业务模块拆分，把大的reducer拆成小文件。

示例：

├── src
   ├── store          # redux目录，一般约定叫store
   |     ├── index.js   # 定义并导出store. 其中会导入reducer
   |     └── reducers   # 多个模块的reducer
   |         ├── reducer1.js   # 模块1的reducer
   |         ├── reducer2.js   # 模块2的reducer
   |         └── index.js      # reducer的整体入口，会导入reducer1, reducer2
   ├── index.js       # 项目的入口文件，会导入并渲染App.js
   ├── App.js         # 根组件，引入模块1 和模块2 组件
   ├── 模块1.js       # 模块1 组件
   └── 模块2.js       # 模块2 组件

示例代码

src/store/reducers/book.js

export default function book (state = ['射雕英雄传', '天龙八部'], action) {
  console.log(action)
  switch (action.type) {
    case 'book/add':
      return [state, action.payload]
    default:
      return state
  }
}

src/store/reducers/index.js

import book from './book'
import user from './user'

import { combineReducers } from 'redux'

const rootReducer = combineReducers({
  book,
  user
})

export default rootReducer

Reducer 的分离与合并-实现

示例图

合并后，Redux 的状态会变为一个对象，对象的结构与 combineReducers 函数的参数结构相同

操作

• 获取状态。useSelecter

• 修改状态。dispatch()

 总结

1. 多个reducer会合并在一起。

2. 每一个action都去执行每个reducer

3. action.type取名时，加上模块名