Question

我在反应 - 减少事情上挣扎了很多时间。我想在<Alert />值为true时向用户isVisible显示。我仍然不了解redux的架构。所以，我试图将价值传递给减速机，但它并没有起作用。我做错了什么？

警报组件：

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

天气容器：

    renderWeather(cityData) {
        const name = cityData.city.name;
        const temps = _.map(cityData.list.map(weather => weather.main.temp), (temp) => temp - 273);

    return (
        <tr key={name}>
            <td><Chart data={temps} color="orange" units="C" /></td>
            </td>
        </tr>
    )
}
    render() {
        return (
            <div>
                {this.props.isVisible ? null : <Alert /> }
                <table className="table table-hover">
                    <thead>
                        <tr>
                            <th>City</th>
                            <th>Temperature (C)</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.props.weather.map(this.renderWeather)}
                    </tbody>
                </table>
            </div>
        )
    }
}

function mapStateToProps({ weather, isVisible }) {
    return { weather, isVisible };
}

export default connect(mapStateToProps)(WeatherList);

指数缩减器：

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

export default rootReducer;

减速机：

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

Answer 1

您必须决定您的州是否需要是数组或对象。从reducer中，初始状态是一个空数组，但如果调度FETCH_WEATHER则返回数组，FETCH_WEATHER_ERROR返回对象。

我建议你修改combineReducers，没有必要将同一个reducer传递给root状态下的不同属性。

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 ? <Alert /> : null }

Answer 2

将代码拆分为更小的reducer：

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

现在每个reducer函数都有自己的控制区。

在你的减速机中你有混合型的状态。默认值为空数组[]，但稍后您返回了一个对象（{state, isVisible: false}）。不要这样做。您还可以将weather和isVisible个状态节点减少相同的WeatherReducer。它不正确，因为修改此节点的逻辑是不同的。

Answer 3

你需要一个可以改变isVisible的动作当量

function changeVisible() {
 return {
   type: FETCH_WEATHER_ERROR
  }
}

和

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

Answer 4

{this.props.isVisible ? null : <Alert /> }应由{this.props.isVisible ? <Alert /> : null }替换，因为当 this.props.isVisible 为真时，只会显示但您正在执行此操作错误.. 希望它有所帮助

如何将道具传递给减速机？ ReactJs和Redux

4 个答案: