React Redux什么情况应用 使用教学是怎样
|
这篇文章给大家分享的是“React Redux什么情况应用，使用教程是怎样”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。 一 React-Redux的应用 1.学习文档 英文文档: https://redux.js.org/ 中文文档: https://cn.redux.js.org/ Github: https://github.com/reactjs/redux 2.Redux的需求 状态的集中管理 任意页面与组件之间的数据传递 状态管理的可预测 数据的本地化缓存提升性能 说明： 随着对JavaScript单页应用程序的要求变得越来越复杂，我们的代码必须比以前更多地处理状态。此状态可以包括服务器响应和缓存数据，以及本地创建的尚未保存到服务器的数据。 UI状态的复杂性也在增加，因为我们需要管理活动路线，选定标签，旋钮，分页控件等。 管理这个不断变化的状态是困难的。 如果一个模型可以更新另一个模型，那么一个视图可以更新一个模型，该模型会更新另一个模型，而这又可能导致另一个视图更新。在某种程度上，您不再理解您的应用程序会发生什么情况，因为您已经失去了对其状态的何时，为何和如何的控制。 当系统不透明且不确定时，很难重现错误或添加新功能。 好像这还不够糟糕，请考虑新的要求在前端产品开发中变得常见。作为开发人员，我们需要处理乐观的更新，服务器端渲染，在执行路由转换之前获取数据等等。 我们发现自己试图去处理一个我们以前从来没有处理过的复杂问题，而且我们不可避免地提出这个问题：是放弃的时候了吗？答案是不。 这种复杂性很难处理，因为我们正在混合两个对人类头脑非常难以推理的概念：突变和异步性。我把它们叫做曼托斯和可乐。两者在分离方面都很出色，但它们一起造成一团糟。像React这样的库试图通过去除异步和直接DOM操作来解决视图层中的这个问题。但是，管理数据的状态由您决定。这是Redux进入的地方。 3.什么是Redux redux是一个独立专门用于做状态管理的JS库(不是react插件库) 它可以用在react、angular、vue等项目中，但基本与react配合使用 作用：集中式管理react应用中多个组件共享的状态 4.什么情况下需要使用redux 总体原则: 大型项目状态管理复杂才用 某个组件的状态，需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 二、最新React-Redux 的流程 安装Redux Toolkit # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit 创建一个 React Redux 应用 官方推荐的使用 React 和 Redux 创建新应用的方式是使用官方 Redux+JS 模版或Redux+TS 模板，它基于Create React App，利用了Redux Toolkit和 Redux 与 React 组件的集成. # Redux + Plain JS template npx create-react-app my-app --template redux # Redux + TypeScript template npx create-react-app my-app --template redux-typescript Redux 核心库 Redux 核心库同样有 NPM 软件包，可与模块捆绑器或 Node 应用程序一起使用，安装方式如下： # NPM npm install redux # Yarn yarn add redux 基础示例 应用的整体全局状态以对象树的方式存放于单个store。 唯一改变状态树（state tree）的方法是创建action，一个描述发生了什么的对象，并将其dispatch给 store。 要指定状态树如何响应 action 来进行更新，你可以编写纯reducer函数，这些函数根据旧 state 和 action 来计算新 state。 import { createStore } from 'redux' /** * 这是一个 reducer 函数：接受当前 state 值和描述“发生了什么”的 action 对象，它返回一个新的 state 值。 * reducer 函数签名是 : (state, action) => newState * * Redux state 应该只包含普通的 JS 对象、数组和原语。 * 根状态值通常是一个对象。 重要的是，不应该改变 state 对象，而是在 state 发生变化时返回一个新对象。 * * 你可以在 reducer 中使用任何条件逻辑。 在这个例子中，我们使用了 switch 语句，但这不是必需的。 * */ function counterReducer(state = { value: 0 }, action) { switch (action.type) { case 'counter/incremented': return { value: state.value + 1 } case 'counter/decremented': return { value: state.value - 1 } default: return state } } // 创建一个包含应用程序 state 的 Redux store。 // 它的 API 有 { subscribe, dispatch, getState }. let store = createStore(counterReducer) // 你可以使用 subscribe() 来更新 UI 以响应 state 的更改。 // 通常你会使用视图绑定库（例如 React Redux）而不是直接使用 subscribe()。 // 可能还有其他用例对 subscribe 也有帮助。 store.subscribe(() => console.log(store.getState())) // 改变内部状态的唯一方法是 dispatch 一个 action。 // 这些 action 可以被序列化、记录或存储，然后再重放。 store.dispatch({ type: 'counter/incremented' }) // {value: 1} store.dispatch({ type: 'counter/incremented' }) // {value: 2} store.dispatch({ type: 'counter/decremented' }) // {value: 1} Redux Toolkit 示例 import { createSlice, configureStore } from '@reduxjs/toolkit' const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { incremented: state => { // Redux Toolkit 允许在 reducers 中编写 "mutating" 逻辑。 // 它实际上并没有改变 state，因为使用的是 Immer 库，检测到“草稿 state”的变化并产生一个全新的 // 基于这些更改的不可变的 state。 state.value += 1 }, decremented: state => { state.value -= 1 } } }) export const { incremented, decremented } = counterSlice.actions const store = configureStore({ reducer: counterSlice.reducer }) // 可以订阅 store store.subscribe(() => console.log(store.getState())) // 将我们所创建的 action 对象传递给 `dispatch` store.dispatch(incremented()) // {value: 1} store.dispatch(incremented()) // {value: 2} store.dispatch(decremented()) // {value: 1} 三、使用教程 安装Redux Toolkit和React-Redux 添加 Redux Toolkit 和 React-Redux 依赖包到你的项目中： 创建 Redux Store 创建src/app/store.js文件。从 Redux Toolkit 引入configureStoreAPI。我们从创建一个空的 Redux store 开始，并且导出它: app/store.js import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: {} }) npm install @reduxjs/toolkit react-redux 上面代码创建了 Redux store ，并且自动配置了 Redux DevTools 扩展 ，这样你就可以在开发时调试 store。 为React提供Redux Store 创建 store 后，便可以在 React 组件中使用它。 在 src/index.js 中引入我们刚刚创建的 store , 通过 React-Redux 的<Provider>将<App>包裹起来,并将 store 作为 prop 传入。 index.js import React from 'react' import ReactDOM from 'react-dom' import './index.css' import App from './App' import store from './app/store' import { Provider } from 'react-redux' ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ) 创建Redux State Slice 创建src/features/counter/counterSlice.js文件。在该文件中从 Redux Toolkit 引入createSliceAPI。 创建 slice 需要一个字符串名称来标识切片、一个初始 state 以及一个或多个定义了该如何更新 state 的 reducer 函数。slice 创建后 ，我们可以导出 slice 中生成的 Redux action creators 和 reducer 函数。 Redux 要求我们通过创建数据副本和更新数据副本，来实现不可变地写入所有状态更新。不过 Redux ToolkitcreateSlice和createReducer在内部使用 Immer 允许我们编写“可变”的更新逻辑，变成正确的不可变更新。 features/counter/counterSlice.js import { createSlice } from '@reduxjs/toolkit' export const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { increment: state => { // Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它 // 并不是真正的改变状态值，因为它使用了 Immer 库 // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的 // 不可变的状态 state.value += 1 }, decrement: state => { state.value -= 1 }, incrementByAmount: (state, action) => { state.value += action.payload } } }) // 每个 case reducer 函数会生成对应的 Action creators export const { increment, decrement, incrementByAmount } = counterSlice.actions export default counterSlice.reducer 将Slice Reducers添加到Store 中 下一步，我们需要从计数切片中引入 reducer 函数，并将它添加到我们的 store 中。通过在 reducer 参数中定义一个字段，我们告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新。 app/store.js import { configureStore } from '@reduxjs/toolkit' import counterReducer from '../features/counter/counterSlice' export default configureStore({ reducer: { counter: counterReducer } }) 在React组件中使用Redux状态和操作 现在我们可以使用 React-Redux 钩子让 React 组件与 Redux store 交互。我们可以使用useSelector从 store 中读取数据，使用useDispatchdispatch actions。创建包含<Counter>组件的src/features/counter/Counter.js文件，然后将该组件导入App.js并在<App>中渲染它。 features/counter/Counter.js import React from 'react' import { useSelector, useDispatch } from 'react-redux' import { decrement, increment } from './counterSlice' import styles from './Counter.module.css' export function Counter() { const count = useSelector(state => state.counter.value) const dispatch = useDispatch() return ( <div> <div> <button aria-label="Increment value" onClick={() => dispatch(increment())} > Increment </button> <span>{count}</span> <button aria-label="Decrement value" onClick={() => dispatch(decrement())} > Decrement </button> </div> </div> ) } 现在，每当你点击”递增“和“递减”按钮。 会 dispatch 对应的 Redux action 到 store 在计数器切片对应的 reducer 中将看到 action 并更新其状态 <Counter>组件将从 store 中看到新的状态，并使用新数据重新渲染组件 你学到了什么 这是关于如何通过 React 设置和使用 Redux Toolkit 的简要概述。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
