更新陣列時Redux狀態未更新

Question

預期成績

• 在我的主容器中調用this.props.startGetPrices()之后。
• API被命中並將數據返回到reducer。
• 然后，它應該更新Redux狀態，從而更新容器中的狀態。

結果

• 調用操作，API返回Array中格式化的數據，資產發送到reducer，但是Redux狀態不會更新。

我的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);

---

我的轉換器實用程序

// Takes rates { key : value } pairs and converts into Array of objects.
export const ratesIntoArray = ({ data: { rates } }: any) =>
  Object.keys(rates).map(data => new Object({ [data]: rates[data]}));

Answer 1

更改此行

return {
    // assets: new Array(payload, ...state.assets)[0],
    assets: payload,
    ...state
  };

對此

return {
    ...state
    // assets: new Array(payload, ...state.assets)[0],
    assets: payload,    
  };

問題是您要通過在分配后進行銷毀來用舊值替換新值。