Javascript 如何将道具传递到减速器？ReactJs和Redux

我花了好几个小时都在和react redux做斗争。当

可见时，我想向用户显示
值为true。我仍然不太了解redux的架构。所以，我试图将值传递给reducer，但它不起作用。我做错了什么

警报组件：

export default () => {
        return (
            <div className="alert alert-warning">
                <strong>Warning!</strong> Indicates a warning that might need attention.
            </div>
        );
    };

减速器：

export default function (state = [], action) {
    switch (action.type) {
    case FETCH_WEATHER:
        return [...state, action.payload];
    case FETCH_WEATHER_ERROR: 
        return {state, isVisible: false}
    }
    return state;
}

行动：

export function fetchWeather (city) {
    const url = `${ROOT_URL}&q=${city}`;

    return (dispatch) => {
        axios.get(url);
        .then(({data}) => {
            dispatch({type: FETCH_WEATHER, payload: data});
        })
        .catch((error) => { 
            dispatch({type: FETCH_WEATHER_ERROR, payload: error});
        });
    };
}

您需要一个操作来更改isVisible
情商

及

{this.props.isVisible？null:}
应替换为
{this.props.isVisible？：null}
，因为当this.props.isVisible为true时，只有可见，但您做错了。。
希望它有帮助
您必须决定您的状态需要是数组还是对象。从reducer中，初始状态是空数组，但如果调度了
FETCH\u WEATHER
，它将返回数组，
FETCH\u WEATHER\u ERROR
将返回对象

我建议您也修改combinereducer，在根状态下将同一个reducer传递给不同的属性是没有意义的

const rootReducer = combineReducers({
 weather: WeatherReducer,
});

够了。假设您的状态是一个对象，具有
isVisible
和
weather
属性。所以你的减速机会变成

export default function (state = {isVisible:false, weather:[]}, action) 
 {
  switch (action.type) {
   case FETCH_WEATHER:
     return Object.assign({}, {weather: action.payload, isVisible:false})
   case FETCH_WEATHER_ERROR: 
     return Object.assign({}, {weather:null, isVisible:true})
   }
   return state;
 }

最后，如果您想显示isVisible何时为真，您必须

{this.props.isVisible？：null}
将代码拆分为更小的缩减器：

const rootReducer = combineReducers({
  weather: weatherReducer,
  isVisible: isVisibleReducer
});

export default rootReducer;


// reducers:
const weatherReducer = (state = [], action) => {
    if (action.type === FETCH_WEATHER) {
        return action.payload; // data object
    }
    if (action.type === FETCH_WEATHER_ERROR) {
        return action.payload; // error object
    }
    return state;
};

const isVisibleReducer = (state = false, action) => {
    if (action.type === FETCH_WEATHER) {
        return true;
    }
    if (action.type === FETCH_WEATHER_ERROR) {
        return false;
    }
    return state;
};

export { weatherReducer, isVisibleReducer };

现在，每个减速器功能都有自己的控制区域

在减速机中，您具有混合类型的状态。默认值为空数组
[]
，但稍后您返回了一个对象（
{state，isVisible:false}
）。不要那样做。
您还可以通过相同的
WeatherReducer
来减少
weather
和
isVisible
状态节点。这是不正确的，因为修改此节点的逻辑不同
 我编辑了我的帖子。听着，我有和你建议的完全一样的东西，它不起作用，打印错误…state和{this.props.isVisible&}“Uncaught（承诺中）TypeError:this.props.weather.map不是一个函数”，所以当我添加它时，整个代码是crashedreturn[…state，action.payload]-必须不是一个数组而是一个对象-返回{…state，action.payload}Nope。我在控制台“Uncaught（in promise）TypeError:this.props.weather.map不是一个函数”中有一个错误，所以将值传递到reducer是有问题的，我想您是否在代码中定义了this.renderWeather？？请记住，它必须返回arrayMakes sense，但当我这样做时，控制台中的this.props.weather.map不是一个函数

错误。我在reducer中更改了initialValue，这样weather将是一个空数组而不是空对象。现在它应该可以工作了，除非您使用非阵列有效负载调度SET_WEATHER，但“this.props.WEATHER.map不是函数”。我不知道我做错了什么…那永远不会发生。this.props.weather将是空数组或天气数组。请尝试将其记录到控制台日志中，确保它在所有渲染调用中都是一个数组，以防它为空。在某些情况下，在执行此操作之前，您必须先处理空大小写。props.weather。map@NicyAnto您将拥有如下状态：

{weather:{weather:[…]，isVisible}

case FETCH_WEATHER_ERROR: 
   return {...state, isVisible: true}

const rootReducer = combineReducers({
 weather: WeatherReducer,
});

export default function (state = {isVisible:false, weather:[]}, action) 
 {
  switch (action.type) {
   case FETCH_WEATHER:
     return Object.assign({}, {weather: action.payload, isVisible:false})
   case FETCH_WEATHER_ERROR: 
     return Object.assign({}, {weather:null, isVisible:true})
   }
   return state;
 }

const rootReducer = combineReducers({
  weather: weatherReducer,
  isVisible: isVisibleReducer
});

export default rootReducer;


// reducers:
const weatherReducer = (state = [], action) => {
    if (action.type === FETCH_WEATHER) {
        return action.payload; // data object
    }
    if (action.type === FETCH_WEATHER_ERROR) {
        return action.payload; // error object
    }
    return state;
};

const isVisibleReducer = (state = false, action) => {
    if (action.type === FETCH_WEATHER) {
        return true;
    }
    if (action.type === FETCH_WEATHER_ERROR) {
        return false;
    }
    return state;
};

export { weatherReducer, isVisibleReducer };