redux 多个连接到一个容器

Question

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

这是 reducer 结合的地方

    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
  }
})

名称容器内的控制台日志给出了未定义的，但对于其余变量，它给出了连接中给出的内容。它根本不监听 name 变量。我的问题是如何将第二个减速器与容器连接

  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 中 reducer 的工作原理的根本误解。

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

根据文档：

The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.

The resulting reducer calls every child reducer, and gathers their results into a single state object. The shape of the state object matches the keys of the passed reducers.

因为你实际上只传递了两个 reducer函数给combineReducers，你只得到了两个状态键。

此外，reducer 只是一个函数，returns 一个对象，然后构成 redux 存储的一部分。你应该只 import 和 export 这些， 而不是 它们产生的状态。如果你希望有更多的键，你需要为你想要的每个键.
做一个reducer函数
如果我猜对了你的意图，你实际上应该做的是将 reducer 和 reducerAList 拆分为每个 cityName, nameOfCity, weatherDescription, windSpeed, name 等的 reducer 函数。你会然后能够在您使用 connect.
创建的容器组件中为它们中的每一个访问一个单独的状态对象

redux 多个连接到一个容器

redux multiple connects to one container

javascript

ecmascript-6

reactjs

redux

react-redux