北京网站外包公司,营销型网站建设原则,阿里巴巴网站建设,seo关键词怎么选react之react-redux的介绍、基本使用、获取状态、分发动作、数据流、reducer的分离与合并等 一、react-redux介绍二、React-Redux-基本使用三、获取状态useSelector四、分发动作useDispatch五、 Redux 数据流六、代码结构七、ActionType的使用八、Reducer的分离与合并九、购物挣… react之react-redux的介绍、基本使用、获取状态、分发动作、数据流、reducer的分离与合并等 一、react-redux介绍二、React-Redux-基本使用三、获取状态useSelector四、分发动作useDispatch五、 Redux 数据流六、代码结构七、ActionType的使用八、Reducer的分离与合并九、购物挣钱案例 一、react-redux介绍
官网地址React 和 Redux 是两个独立的库两者之间职责独立。因此为了实现在 React 中使用 Redux 进行状态管理 就需要一种机制将这两个独立的库关联在一起。这时候就用到 React-Redux 这个绑定库了作用为 React 接入 Redux实现在 React 中使用 Redux 进行状态管理。react-redux 库是 Redux 官方提供的 React 绑定库。 二、React-Redux-基本使用
react-redux 的使用分为两大步1 全局配置只需要配置一次 2 组件接入获取状态或修改状态全局配置 1.安装 react-reduxnpm i react-redux2.从 react-redux 中导入 Provider 组件3.导入创建好的 redux 仓库4.使用 Provider 包裹整个应用5.将导入的 store 设置为 Provider 的 store 属性值 index.js 核心代码 // 导入 Provider 组件
import { Provider } from react-redux
// 导入创建好的 store
import store from ./storeReactDOM.render(Provider store{store}App //Provider,document.querySelector(#root)
)三、获取状态useSelector useSelector获取 Redux 提供的状态数据 参数selector 函数用于从 Redux 状态中筛选出需要的状态数据并返回 返回值筛选出的状态 import { useSelector } from react-redux// 计数器案例中Redux 中的状态是数值所以可以直接返回 state 本身const count useSelector(state state)// 比如Redux 中的状态是个对象就可以const list useSelector(state state.list)App.js中核心代码 import { useSelector } from react-reduxconst App () {const count useSelector(state state)return (divh1计数器{count}/h1button数值增加/buttonbutton数值减少/button/div)
}四、分发动作useDispatch
useDispatch拿到 dispatch 函数分发 action修改 redux 中的状态数据语法
import { useDispatch } from react-redux// 调用 useDispatch hook拿到 dispatch 函数
const dispatch useDispatch()// 调用 dispatch 传入 action来分发动作
dispatch( action ) App.js 中核心代码 import { useDispatch } from react-reduxconst App () {const dispatch useDispatch()return (divh1计数器{count}/h1{/* 调用 dispatch 分发 action */}button onClick{() dispatch(increment(2))}数值增加/buttonbutton onClick{() dispatch(decrement(5))}数值减少/button/div)
}五、 Redux 数据流 任何一个组件都可以直接接入 Redux也就是可以直接1 修改 Redux 状态 2 接收 Redux 状态并且只要 Redux 中的状态改变了所有接收该状态的组件都会收到通知也就是可以获取到最新的 Redux 状态跨组件可直接通讯
六、代码结构
在使用 Redux 进行项目开发时不会将 action/reducer/store 都放在同一个文件中而是会进行拆分可以按照以下结构来组织 Redux 的代码
/store --- 在 src 目录中创建用于存放 Redux 相关的代码/actions.js --- 存放所有的 action/reducers.js --- 存放所有的 reducerindex.js --- redux 的入口文件用来创建 store示例actions.js export const AddMoney (money) ({ type: add_money, money })
export const SubMoney (money) ({ type: sub_money, money }) 示例reducers.js export default function reducer(state 1000, action) {if (action.type add_money) {return state action.money}if (action.type sub_money) {return state - action.money}return state
} 示例index.js //createStore 方法已被启用
import { legacy_createStore as createStore } from reduximport reducer from ./reducer
console.log(reducer, reducer)
const store createStore(reducer)export default store
七、ActionType的使用
Action Type 指的是action 对象中 type 属性的值Redux 项目中会多次使用 action type比如action 对象、reducer 函数、dispatch(action) 等目标集中处理 action type保持项目中 action type 的一致性action type 的值采用domain/action(功能/动作)形式进行分类处理比如 计数器counter/increment 表示 Counter 功能中的 increment 动作登录login/getCode 表示登录获取验证码的动作个人资料profile/get 表示获取个人资料 步骤 1.在 store 目录中创建 actionTypes 目录或者 constants 目录集中处理2.创建常量来存储 action type并导出3.将项目中用到 action type 的地方替换为这些常量从而保持项目中 action type 的一致性 核心代码 // actionTypes 或 constants 目录const increment counter/increment
const decrement counter/decrementexport { increment, decrement }// --// 使用// actions/index.js
import * as types from ../acitonTypes
const increment payload ({ type: types.increment, payload })
const decrement payload ({ type: types.decrement, payload })// reducers/index.js
import * as types from ../acitonTypes
const reducer (state, action) {switch (action.type) {case types.increment:return state 1case types.decrement:return state - action.payloaddefault:return state}
}注额外添加 Action Type 会让项目结构变复杂此操作可省略。但domain/action 命名方式强烈推荐
八、Reducer的分离与合并
随着项目功能变得越来越复杂需要 Redux 管理的状态也会越来越多此时有两种方式来处理状态的更新 1.使用一个 reducer处理项目中所有状态的更新2.用多个 reducer按照项目功能划分每个功能使用一个 reducer 来处理该功能的状态更新 推荐使用多个 reducer第二种方案每个 reducer 处理的状态更单一职责更明确此时项目中会有多个 reducer但是 store 只能接收一个 reducer因此需要将多个 reducer 合并为一根 reducer才能传递给 store合并方式使用 Redux 中的 combineReducers 函数注意合并后Redux 的状态会变为一个对象对象的结构与 combineReducers 函数的参数结构相同 核心代码 import { combineReducers } from redux// 计数器案例状态默认值为0
const aReducer (state 0, action) {}
// Todos 案例状态默认值为[]
const bReducer (state [], action) {}// 合并多个 reducer 为一个 根reducer
const rootReducer combineReducers({a: aReducer,b: bReducer
})// 创建 store 时传入 根reducer
const store createStore(rootReducer)// 此时合并后的 redux 状态 { a: 0, b: [] }九、购物挣钱案例
基本结构 跟组件下包含两个子组件实现功能 点击子组件对应的按钮 实现根组件 兄弟组件资金的更改需安装react-redux 和 redux 代码基本目录 index.js 代码 import ReactDom from react-dom/client
import App from ./App
//引入Provider
import { Provider } from react-redux//引入store
import store from ./store/indexReactDom.createRoot(document.querySelector(#root)).render(Provider store{store}App/App/Provider
) App.js代码 import Women from ./components/women
import Man from ./components/man
//引入useSelector
import { useSelector } from react-reduxexport default function App() {const money useSelector((state) {return state.money})return (divh1我是根组件/h1div资金:{money}/divWomen/WomenMan/Man/div)
} women组件 //引入 useSelector, useDispatch
import { useSelector, useDispatch } from react-redux//引入 action下的SubMoney
import { SubMoney } from ../store/actionexport default function Man() {const money useSelector((state) state.money)const dispath useDispatch()return (divh3女人组件/h3div金钱:{money}/divbuttononClick{() {dispath(SubMoney(500))}}买包-500/button/div)
} men组件 //引入 useSelector, useDispatch
import { useSelector, useDispatch } from react-redux//引入action下的 AddMoney
import { AddMoney } from ../store/actionexport default function Women() {const money useSelector((state) state.money)const dispath useDispatch()return (divh3男人组件/h3div金钱:{money}/divbutton onClick{() dispath(AddMoney(10))}搬砖 10/buttonbutton onClick{() dispath(AddMoney(10000))}卖肾 10000/button/div)
} store文件下的action.js 代码 //按需导出
export const AddMoney (money) ({ type: add_money, money })
export const SubMoney (money) ({ type: sub_money, money }) store文件下的reducer.js 代码 //引入 combineReducers
import { combineReducers } from redux//user模块
function user(state { name: 张三, age: 20岁 }, action) {return state
}
//money 模块
function money(state 1000, action) {if (action.type add_money) {return state action.money}if (action.type sub_money) {return state - action.money}return state
}//模块化
const rootReducer combineReducers({user,money,
})console.log(导出, rootReducer)
export default rootReducer store文件下的index.js 代码 //createStore 方法已被启用
import { legacy_createStore as createStore } from reduximport reducer from ./reducer
console.log(reducer, reducer)
const store createStore(reducer)export default store
