redux的应用

最新推荐文章于 2024-04-21 13:03:47 发布

原创最新推荐文章于 2024-04-21 13:03:47 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了Redux的应用流程，从在应用中注入开始，逐步讲解actions、constants、reducers的角色，最后阐述了store的创建和使用，帮助读者深入理解Redux的状态管理。

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

在这里插入图片描述

1,先在需要用到的地方注入


import { connect } from 'react-redux';
import { setZCH } from '@actions/zchActions';
@connect(
	state => ({
		zchReducers: state.zchReducers
	}),
	{ setZCH }
)
   componentDidMount() {
		this.loadData();
		let a = '虽然我们可以new出很多对象，但我们却new不出属于我们自己的伴侣,虽然我们是不同的对象，都有隐私的一面，
		但我相信你用心待我终会找到我的接口，把我的最真给你看！我会在你需要我的时候，
		供你无限次的调用，直到问题解决，
		因为我曾经或者是现在遇到问题的时候都会用 $.each 去遍历整个组，我不停的打出一个个断点，不停地跨域请求资源，不停的 try catch的时候，
		你终于接收了我的异常，
		完美解决。如果以后我们意见不合，不要一拍两散，搞的内存混乱。'
	
		this.props.setZCH(a)
	}
	
		this.props.setZCH(a)

2，actions

import * as types from '@constants/index';
import { POST } from '@http/index';



/**
 * 设置码表redux
 * @param  {[type]} dict [description]
 * @return {[type]}      [description]
 */
export function setZCH(zch) {
	return {
		type: types.UPDATE_ZCH,
		zch: zch
	}
}


/**
 * 删除码表数据
 * @return {[type]} [description]
 */
export function removeZCH() {
	return {
		type: types.REMOVE_ZCH
	};
}

3，constants

/**
 * 数据字典
 * @type {String}
 */
const UPDATE_ZCH = 'UPDATE_ZCH';
const REMOVE_ZCH = 'REMOVE_ZCH';


export {
	UPDATE_ZCH ,
	REMOVE_ZCH ,
};

4,reducers

import * as types from '@constants/index';

const initialState = {
    resource: {}
};

export default (state = initialState, action) => {
    switch (action.type) {
        case types.UPDATE_ZCH:
            return {
                ...state,
                zch: action.zch
            };
        case types.REMOVE_ZCH:
            return {
                ...state,
                zch: {}
            };
        default:
            return state;
    }
};

5, store

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import reducer from '../reducers';

const persistConfig = {
	key: 'root',
	storage
};
// persistConfig 自身的配置, reducer 里面含有导出的组件
const persistedReducer = persistReducer(persistConfig, reducer);

export default () => {
	let store = createStore(persistedReducer, applyMiddleware(thunk));
	let persistor = persistStore(store);
	return { store, persistor };
};