Javascript 更新阵列时未更新Redux状态 预期结果 在之后,在我的主容器中调用this.props.startGetPrices() API被命中并将数据返回到减速器 然后应该更新Redux状态,从而更新容器中的状态 结果 调用操作时,API返回数组中的格式化数据,将资产发送到reducer中,但Redux状态不更新
My store.ts文件:Javascript 更新阵列时未更新Redux状态 预期结果 在之后,在我的主容器中调用this.props.startGetPrices() API被命中并将数据返回到减速器 然后应该更新Redux状态,从而更新容器中的状态 结果 调用操作时,API返回数组中的格式化数据,将资产发送到reducer中,但Redux状态不更新,javascript,reactjs,typescript,redux,Javascript,Reactjs,Typescript,Redux,My store.ts文件: import { createStore, applyMiddleware } from 'redux' import { composeWithDevTools } from 'redux-devtools-extension' import thunkMiddleware from 'redux-thunk' import { getLatest } from './services/api' export interface IinitialState {
import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'
import { getLatest } from './services/api'
export interface IinitialState {
assets: any[];
wallets: any[];
defaultCurrency: string;
}
export interface IPricesRes {
data: IPriceData
}
export interface IPriceData {
base: string;
date: string;
rates: any;
success: boolean;
timestamp: number;
}
const defaultInitialState = {
assets: [],
wallets: [],
defaultCurrency: ''
}
// ACTION TYPES
export const actionTypes = {
GET_PRICES: 'GET_PRICES'
}
// const updateAssets = (state: IinitialState, action: any) => {
// const { assets } = state;
// const newArray = new Array(action.payload, ...assets)[0];
// return newArray;
// }
// REDUCER
export const reducer = (state = defaultInitialState, action: any) => {
switch (action.type) {
case actionTypes.GET_PRICES: {
const { payload } = action;
console.log('payload', payload);
// const newAssets = updateAssets(state, action);
// console.log('newAssets', newAssets);
return {
// assets: new Array(payload, ...state.assets)[0],
assets: payload,
...state
};
}
default:
return state;
}
}
// ACTIONS CREATORS
export const actionGetPrices = (rates: any) => ({
type: actionTypes.GET_PRICES,
payload: rates
});
// ACTIONS
export const startGetPrices = () => (dispatch: any) => getLatest().then((ratesArray) => {
dispatch(actionGetPrices(ratesArray));
});
// @ts-ignore
export function initializeStore(initialState = defaultInitialState) {
return createStore(
reducer,
initialState,
composeWithDevTools(applyMiddleware(thunkMiddleware))
)
}
我的容器文件FiatWallet.tsx
import React from 'react'
import { connect } from 'react-redux'
import { startGetPrices, IPricesRes } from '../store'
import { CurrencySelector, Header, Prices, Navigation } from '../components'
interface IProps {
assets: [];
wallets: [];
defaultCurreny: string;
startGetPrices(): IPricesRes;
}
class FiatWallet extends React.PureComponent<IProps> {
componentDidMount() {
console.log('FiatWallet componentDidMount...');
this.props.startGetPrices();
}
public render() {
const { assets } = this.props;
console.log('assets from redux state:', assets);
return (
<section>
<CurrencySelector />
<Header />
<Prices prices={assets} />
<Navigation />
</section>
);
}
}
const mapDispatchToProps = (dispatch: any) => ({
startGetPrices: () => dispatch(startGetPrices())
});
const mapStateToProps = (state: any) => ({
assets: state.assets,
wallets: state.wallets,
defaultCurrency: state.defaultCurrency
});
export const BoardJest = FiatWallet;
export default connect(mapStateToProps, mapDispatchToProps)(FiatWallet);
换行
return {
// assets: new Array(payload, ...state.assets)[0],
assets: payload,
...state
};
对此
return {
...state
// assets: new Array(payload, ...state.assets)[0],
assets: payload,
};
问题是,您正在通过在分配后进行分解来用旧值替换新值。谢谢!我知道这很简单:)
return {
...state
// assets: new Array(payload, ...state.assets)[0],
assets: payload,
};