Question

这是我与缩减器和操作有关的代码，但我看不到storeState获取数据。它将新项目添加到stateStore中，但未定义。我的操作/索引文件如下

import axios from 'axios';

const API_KEY = 'f41c2a072e2fab2d1319257e842d3b4b';
const ROOT_URL = `https://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}`;

export const FETCH_WEATHER = 'FETCH_WEATHER';

export function fetchWeather(city){
    const url  = `${ROOT_URL}&q=${city},pk`;
    const request = axios.get(url); 
    return {
        type: FETCH_WEATHER,
        payload: request
    };
}

我的weather_reducer.js如下

import { FETCH_WEATHER } from '../actions/index';

export default function(state=[], action){
    switch (action.type) {
        case FETCH_WEATHER:{
            return [action.payload.data, ...state];  //ES6 Spread Operator [newCity,all_old_elms_from_state] 
        }
             
        default:
            return state;
    }
    
}

我的reducers / index.js如下：-

import { combineReducers } from 'redux';
import WeatherReducer from './reducer_weather';

const rootReducer = combineReducers({
    weather: WeatherReducer
});

export default rootReducer;

我的index.js文件如下

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers/index';

import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './components/App';



const store = createStore(rootReducer);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root'));

最后，我的contianers / SearchBar.js如下

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchWeather } from '../actions/index';


class SearchBar extends Component{
    constructor(props){
        super(props);
        this.state = {term:''}; //Local state of component ======== Not Redux(Global APP) state
        this.onInputChange = this.onInputChange.bind(this); //Bind this (components context to your function
        this.onFromSubmit = this.onFromSubmit.bind(this);
    }
    onInputChange(event) {
        this.setState({ term:event.target.value });
    }

    onFromSubmit(event){
        event.preventDefault();
        //Go fetch weather data based on term
        this.props.fetchWeather(this.state.term);
        this.setState({ term:'' });
    }
    render(){
        return(
            <div className="col-sm-12">
                <form onSubmit={this.onFromSubmit}>
                    <div className="input-group mb-3">
                        <input 
                            className="form-control"
                            placeholder="Get five-day forecast for your favorite cities.."
                            value={this.state.term}
                            onChange={this.onInputChange}
                        />
                        <div className="input-group-append">
                            <button className="btn btn-outline-secondary" type="submit">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        );
    }
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({ fetchWeather },dispatch);
}

export default connect(null,mapDispatchToProps)(SearchBar);

Answer 1

谢谢您的支持，我发现了它，实际上我在index.js中缺少了中间件参数。与applyMiddleWare中一样，我们必须传递中间件名称。

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import { Provider } from 'react-redux';

import rootReducer from './reducers/index';

import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './components/App';



const storeWithMiddleWare = applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
    <Provider store={storeWithMiddleWare(rootReducer)}>
        <App />
    </Provider>, 
    document.getElementById('root'));

Redux状态显示使用axios插入stateStore中的未定义数据

1 个答案: