# Redux 的使用:

最新推荐文章于 2022-08-15 19:22:45 发布

「已注销」

最新推荐文章于 2022-08-15 19:22:45 发布

阅读量305

点赞数

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/Jingwen_molo/article/details/121771965

版权

本文详细介绍了如何在项目中使用Redux，包括创建store、配置reducer来处理不同操作，以及如何在组件间订阅和更新数据。通过实例演示了如何在页面中导入store、修改数据和设置监听，帮助开发者理解和实践Redux的状态管理。

摘要由CSDN通过智能技术生成

# Redux 的使用:
    1. 创建Redux文件夹,store.js负责配置创建一个全局共享的store;
        import {createStore} from 'redux';
        import reducer from './reducer';
        export default createStore(reducer);
        
    2. Redux文件夹,reducer.js负责配置操作store的相关操作,也就是reducer
        let defaultState = {
            num: 100,
        }
        export default function reducer (state=defaultState,action){
            switch (action.type){
                case 'add':
                    let data = {
                        ...state,
                        num: state.num + 1
                    };
                    return data;
                case 'min':
                    let data1 = {
                        ...state,
                        num: state.num - 1
                    };
                    return data1
                default:
                    return state;
            }
        }
       
    3. 使用数据与修改数据:
        在page文件中引入Store: import Store from '../store';
        把store放入到state中: state = {...Store.getState()};
        修改store中的数据: onClick = Store.dispatch({type:"add"});
        设置Store数据的监听: Store.subscribe(this.changeState);
        在事件中把store中的数据更新给state;