React Redux应用示例详解_React_

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}

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}

import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: {} })

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') )

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

import { configureStore } from '@reduxjs/toolkit' import counterReducer from '../features/counter/counterSlice' export default configureStore({ reducer: { counter: counterReducer } })

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 = 
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：使用Nodejs 实现一个简单的 Redis客户端(推荐)_node.js_
                                                                
下一篇：JavaScript断言与类型守卫及联合声明超详细介绍_javascript技巧_