Javascript 更新阵列时未更新Redux状态 预期结果 在之后,在我的主容器中调用this.props.startGetPrices() API被命中并将数据返回到减速器 然后应该更新Redux状态,从而更新容器中的状态 结果 调用操作时,API返回数组中的格式化数据,将资产发送到reducer中,但Redux状态不更新

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 {

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 {
  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,    
  };