React-redux使用教程_react使用redux

NPM

npm install @reduxjs/toolkit

Yarn

yarn add @reduxjs/toolkit

### 2.创建一个 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 引入 `configureStore` API。我们从创建一个空的 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 的 ``将 `` 包裹起来,并将 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(


,
document.getElementById(‘root’)
)

#### 创建 Redux State Slice[​]( )


创建 `src/features/counter/counterSlice.js` 文件。在该文件中从 Redux Toolkit 引入 `createSlice` API。


创建 slice 需要一个字符串名称来标识切片、一个初始 state 以及一个或多个定义了该如何更新 state 的 reducer 函数。slice 创建后 ，我们可以导出 slice 中生成的 Redux action creators 和 reducer 函数。


Redux 要求[我们通过创建数据副本和更新数据副本，来实现不可变地写入所有状态更新]( )。不过 Redux Toolkit `createSlice` 和 `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 中读取数据，使用 `useDispatch` dispatch actions。创建包含 `` 组件的 `src/features/counter/Counter.js` 文件，然后将该组件导入 `App.js` 并在 `` 中渲染它。


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 (

aria-label=“Increment value”
onClick={() => dispatch(increment())}
>
Increment

{count}
aria-label=“Decrement value”
onClick={() => dispatch(decrement())}

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包