在react中使用redux

最新推荐文章于 2025-07-11 16:48:11 发布

原创最新推荐文章于 2025-07-11 16:48:11 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #redux #react组件通信

react 专栏收录该内容

5 篇文章

订阅专栏

本文通过一个具体例子展示了如何使用Redux进行状态管理，包括Action、Reducer及Store的创建过程，并介绍了dispatch和subscribe的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建Action

action/index.ts

const sendAction = () => {return {type: "send_ action",value: "发送了 - -个action"}}
mqdule.exports = {sendAction}

创建reducer

reducer/index.ts

const initstate = {
    value: "默认值"
};
const rootReducer = (state = initState ，action) => {
    switch (action.type) {
        case " send_ type" :
            return object.assign({}, state, action);
        default:
            default:
    }
};  
module .exports = {
    reducer
};

创建store

store/index.ts

import { createstore } from " redux" ;
import {reducer} from "xxx/reducer"
const store = createStore(reducer);
export default store;

dispath

App.ts

     import React from "react"; 
     import store from "xxx/store";
     import store from "xxxx/store";
     export default class App extends React.Component {
        handleclick = () => {
            const action = sendction;
            store.dipath(action);
        }
        render() {
            return <button onClick={this.handleclick}>dispath(action)</button>
        }
     }

App.ts

   import React from "react"; 
     import store from "xxx/store";
     import store from "xxxx/store";
     export default class App extends React.Component {
        handleclick = () => {
            const action = sendction;
            store.dipath(action);
        }
        coponentDidrount() {
            store.subscribe(() => {
                console.log(store.getState());
                this.setState({});
                console.log(store.getState());
            }
        }
        render() {
            return <button onClick={this.handleclick}>dispath(action)</button>
        }
     }