[英]redux multiple connects to one container
I have two reducers I want to use both of them in one container but it only pulls from one 我有两个减速器,我想在一个容器中使用它们,但是只能从一个中拉出
this is where reducers combine 这是减速器结合的地方
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
})
reducers 减速器
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;
}
store 商店
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)
container 容器
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
}
})
This console log inside container for name gives undefined but for rest of the variables it gives what is given in connect. 该容器内部的控制台日志的名称给出了未定义的信息,但对于其余变量,它给出了connect中给出的信息。 It's not listening for name variable at all.
它根本不监听名称变量。 My question is how to connect this second reducer with container
我的问题是如何将第二个减速器与容器连接
render() {
const { cityName, nameOfCity, weatherDescription, windSpeed, temperature, maxTemperature, minTemperature, name} = this.props;
console.log(name);
} }
You've made several errors here. 您在这里犯了几个错误。 Let's dive in.
让我们潜入。
Firstly, name
is not even exported from the module weather-apiReducers
. 首先,
name
甚至没有从weather-apiReducers
模块导出。
Let's see what's exported from it: 让我们看看它导出了什么:
export default reducer ...
, and, export reducerAList ...
. export default reducer ...
,然后export reducerAList ...
When you then try to do the following: 当您尝试执行以下操作时:
import name from './weather-apiReducers
, in reality, name
resolves to that module's default
export. import name from './weather-apiReducers
,实际上, name
解析为该模块的default
导出。 Therefore, when you include it in your call to combineReducers
, in reality, you are passing the same function (the default
export), twice. 因此,实际上,在将其包含在对
combineReducers
的调用中combineReducers
,实际上是两次传递相同的函数( default
导出)。
The second mistake you made is a fundamental misunderstanding of how a reducer works in Redux. 您犯的第二个错误是对Redux中reducer的工作原理的基本误解。
In Redux, state is stored in a single atomic object. 在Redux中,状态存储在单个原子对象中。 Each reducer you pass to
combineReducers
gets a key which corresponds to the last state object returned by that reducer . 您传递给
combineReducers
每个reducer都获得一个键,该键对应于该reducer返回的最后一个状态对象 。
According to the docs: 根据文档:
The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.
CombineReducers辅助函数将值不同的归约函数的对象转换为可传递给createStore的单个归约函数。
The resulting reducer calls every child reducer, and gathers their results into a single state object.
生成的reducer调用每个子级的reducer,并将其结果收集到一个状态对象中。 The shape of the state object matches the keys of the passed reducers.
状态对象的形状与传递的化径器的键匹配。
Since you, in reality, only passed two reducer functions to combineReducers
, you only got back two state keys. 由于实际上您仅将两个 reducer函数传递给
combineReducers
,因此您仅获得了两个状态键。
Also, a reducer is just a function that returns an object, that then forms part of the redux store. 同样,reduceer只是一个返回对象的函数,然后该对象形成redux存储的一部分。 You should only
import
and export
these, not the state they produce. 您应该只
import
和export
这些内容, 而不是它们产生的状态。 If you wish to have more keys, you need to make a reducer function for every key you want to have . 如果您希望拥有更多的钥匙,则需要为每个要拥有的钥匙制作一个减速器功能。
If I've guessed your intentions correctly, what you should in fact do is split up reducer
and reducerAList
into reducer functions for each of cityName, nameOfCity, weatherDescription, windSpeed, name
etc. You'll then be able to access a separate state object for each of them in your container component which you created with connect
. 如果我正确地猜到了您的意图,那么实际上您应该做的就是将
reducer
和reducerAList
拆分为针对cityName, nameOfCity, weatherDescription, windSpeed, name
等中的每一个的reducer函数。然后cityName, nameOfCity, weatherDescription, windSpeed, name
您将能够访问单独的状态对象对于使用connect
创建的容器组件中的每个组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.