Question

我有两个减速器，我想在一个容器中使用它们，但它只从一个

中拉出来

这是减速器组合的地方

    import { combineReducers } from "redux"

    import cityName from "./weather-apiReducers"
    import nameOfCity from "./weather-apiReducers"
    import weatherDescription from "./weather-apiReducers"
    import windSpeed from "./weather-apiReducers"
    import temperature from "./weather-apiReducers"
    import maxTemperature from "./weather-apiReducers"
    import minTemperature from "./weather-apiReducers"
    import isClicked from "./weather-apiReducers"
    import name from "./weather-apiReducers"

    export default combineReducers({
        cityName,
        nameOfCity,
        weatherDescription,
        windSpeed,
        temperature,
        maxTemperature,
        minTemperature,
        isClicked,
        name
    })

减速器

export default function reducer(state={
    nameOfCity: "",
    weatherDescription: "",
    windSpeed: "",
    temperature: "",
    maxTemperature: "",
    minTemperature: "",
}, action) {
    switch (action.type){
        case "FETCH_WEATHER_DATA": {
            return {...state,
                fetching: true
            }
        }
        case "FETCH_WEATHER_REJECTED": {
            return {...state,
                fetching: false,
                error: action.data
            }
        }
        case "FETCH_WEATHER_DATA_FULFILLED": {
            return {...state,
                fetching: false,
                fetched: true,
                nameOfCity: action.results.city.name,
                weatherDescription: action.results.list[0].weather[0].description,
                windSpeed: action.results.list[2].wind.speed,
                temperature: action.results.list[0].main.temp,
                maxTemperature: action.results.list[0].main.temp_max,
                minTemperature: action.results.list[0].main.temp_min
            }
        }
        case "UPDATE_INFO_DATA_FULFILLED": {
            return {...state,
                nameOfCity: action.results.cityName,
            }
        }
        case "HANDLE_CITY_NAME": {
            return {...state,
                cityName: action.value,
            }
        }
    }

    return state;
}


 export function reducerAList(state={
 id: "",
 name: ""
 }, action) {
switch (action.type){
    case "FETCH_A_DATA": {
        return {...state,
            fetching: true
        }
    }
    case "FETCH_A_REJECTED": {
        return {...state,
            fetching: false,
            error: action.data
        }
    }
    case "FETCH_A_DATA_FULFILLED": {
        return {...state,
            fetching: false,
            fetched: true,
            name: action.resultsP.name

        }
    }
}
return state;
}

商店

  import { applyMiddleware, createStore } from "redux"

 import logger from "redux-logger"
 import thunk from "redux-thunk"
 import promise from "redux-promise-middleware"
 import reducer, {reducerAList} from "./reducers"

 const middleware = applyMiddleware(thunk, promise(), logger())

 export default createStore( reducer, reducerAList, middleware)

容器

 import React, { Component } from 'react';
 import './App.css';
 import {FormContainer} from './containers/FormContainer';
 import WeatherInfo from './components/WeatherInfo';
import {fetchWeatherData} from "./actions/weather-apiActions";
import {fetchAList} from "./actions/weather-apiActions";
import {connect} from "react-redux"
@connect((store) => {

return {
   nameOfCity:store.nameOfCity.nameOfCity,
   weatherDescription:store.weatherDescription.weatherDescription,
   windSpeed:store.windSpeed.windSpeed,
   temperature:store.temperature.temperature,
   maxTemperature:store.maxTemperature.maxTemperature,
   minTemperature:store.minTemperature.minTemperature,
   name:store.name
  }
})

这个控制台日志在容器中的名称给出了未定义的但是对于其余的变量，它给出了在connect中给出的内容。它根本没有听取名字变量。我的问题是如何将第二个减速器与容器

连接起来

  render() {
    const { cityName, nameOfCity, weatherDescription, windSpeed,      temperature, maxTemperature, minTemperature, name} = this.props;
console.log(name);

}

Answer 1

你在这里犯了几个错误。让我们潜入。

首先，name甚至不会从模块weather-apiReducers导出。

让我们看看从中导出的内容：

export default reducer ...，以及 export reducerAList ...。

然后尝试执行以下操作：

import name from './weather-apiReducers，实际上，name会解析为该模块的default导出。因此，当您将其包含在combineReducers的调用中时，实际上，您传递了相同的功能（default导出），两次。

你犯的第二个错误是对Redux如何在Redux中工作的基本误解。

在Redux中，状态存储在单个原子对象中。传递给combineReducers的每个reducer都会获得一个键，该键对应于该reducer返回的最后一个状态对象。

根据文件：

combineReducers辅助函数可以转换值为的对象   将不同的还原功能集成到单个还原功能中即可   传递给createStore。

生成的减速器调用每个儿童减速器，然后收集它们   结果成一个状态对象。状态对象的形状   匹配传递的Redurs的键。

由于您实际上只将两个减速器函数传递给combineReducers，因此您只能获得两个状态键。

此外，reducer只是一个返回一个对象的函数，然后该对象构成了redux存储的一部分。您应该import和export这些，不他们生成的状态。如果您希望拥有更多密钥，则需要为您希望拥有的每个密钥创建一个减速器功能。

如果我已经正确猜到了你的意图，你应该做的事情是将reducer和reducerAList分成cityName, nameOfCity, weatherDescription, windSpeed, name等每个人的减速器功能。你＆＃39 ;然后能够在您使用connect创建的容器组件中为每个对象访问一个单独的状态对象。

redux multiple连接到一个容器

1 个答案: