Состояние Redux показывает неопределенные данные, вставленные в stateStore с помощью axios - PullRequest
Новая
       5

Состояние Redux показывает неопределенные данные, вставленные в stateStore с помощью axios

0 голосов
/ 29 декабря 2018

Вот мой код, связанный с редукторами и действиями, но я не вижу, чтобы мой 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;
    }
    
}

Мой редуктор / 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);

1 Ответ

0 голосов
/ 29 декабря 2018

Спасибо за поддержку, я разобрался, на самом деле мне не хватало параметра middleware в моем 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'));
...