如何从Redux中的状态（和LocalStorage）中删除对象？

Question

我是Redux / React的新手。我一直在尝试添加一个从状态（和LocalStorage）中删除对象的函数，并且到目前为止都失败了。我认为问题在于我无法从＆＃39; this.props.weather＆＃39;中提取单个对象。 （这是一个数组）并将其作为参数传递给＆＃39; removeItem＆＃39;功能＆＃39 ;.在动作创作者以及“位置”中。参数实际上是一个列表而不是一个对象。我也不确定减速机。我想知道是否有人可以看看并告诉我我做错了什么。 非常感谢你。

天气列表容器##

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import Chart from '../components/Chart.jsx';
import Google_map from '../components/Google_map.jsx';
import {removeItem} from '../actions/index.js';

class WeatherList extends React.Component{

 handleRemoveItem = () => {      
 if (typeof this.props.removeItem === 'function') {
 this.props.removeItem(this.props.weather)
}
console.log('remove click works')    
}

 renderWeather=(cityData)=>{
    const name=cityData.city.name;
    const temps=cityData.list.map(weather=>weather.main.temp);
    const pressures=cityData.list.map(weather=>weather.main.pressure);
    const humidities = cityData.list.map(weather => weather.main.humidity);
    const {lon, lat}=cityData.city.coord;

    return <tr key={name} id={name}>
                    <td><Google_map lon={lon} lat={lat}/></td>
                    <td><Chart data={temps} color='orange' units='C'/></td>
                    <td><Chart data={pressures} color='blue' units='hPa'/</td>
                    <td><Chart data={humidities} color='green' units='%'/</td>
                    <td><span className='input-group-btn'>
                        <button className ='btn btn-secondary'
                           onClick{this.handleRemoveItem}>Remove
                        </button>
                        </span>
                   </td>
            </tr>
   }
   render(){
    return <table className='table table-hover'>
              <thead>
                  <tr>
                     <th>City</th>
                     <th>Temperature (C)</th>
                     <th>Pressure (hPa)</th>
                     <th>Humidity (%)</th>
                  </tr>
              </thead>
              <tbody>
                  {this.props.weather.map(this.renderWeather)}
              </tbody>
           </table>
  }
 }
 function mapStateToProps ({weather}){
      return {weather};

}
function mapDispatchToProps(dispatch){
      return bindActionCreators({removeItem}, dispatch);
}
 export default connect(mapStateToProps, mapDispatchToProps)(WeatherList);

动作创作者

  export const FETCH_WEATHER = 'FETCH_WEATHER';
  export const REMOVE_ITEM='REMOVE_ITEM';

  export function fetchWeather(city) {
     const url = `${ROOT_URL}&q=${city}`;
     const request = axios.get(url);
     return {type: FETCH_WEATHER, payload: request};
   }

export function removeItem(location){
      return {
         type: REMOVE_ITEM, 
         payload: location, 
        }               
 }

减速

  import {REMOVE_ITEM} from '../actions/index.js';
  export default function (state = [], action) {
       switch (action.type) {
       case REMOVE_ITEM:
             const index=state.filter(item=> city===action)
             return [...state.slice(0, index),
                    ...state.slice(index+1)];

       }
        return state;
       }

Reducers Combined

 import {combineReducers} from 'redux';
 import WeatherReducer from './reducer_weather.js';
 import RemoveItem from './reducer_removeItem.js';
 const rootReducer=combineReducers({
     weather: WeatherReducer,
     removeItem: RemoveItem,
   }
 );

 export default rootReducer;

Answer 1

首先，reducer是纯函数，如果你想在我看来有一些逻辑，你需要在动作中做到这一点。 所以在行动中你需要获得状态并更改对象之后将obj返回到Reducer，在这种情况下你将确保它将以正确的方式更新。

＆＃13;

＆＃13;

export function someAction(location){
      return {
         type: REMOVE_ITEM, 
         payload: location, 
        }               
 }
export const removeItem(location)=>{
    return (dispatch, getState) => {
        const {location} = getState().RemoveItem ; //RemoveItem Reducer
        //do your logic here on Location state, after that pass it to 
        //someAction
        dispatch(someAction(location));
      }
}

＆＃13;

＆＃13;

＆＃13;