Состояние Redux возвращается в состояние Inital - PullRequest
Новая
       15

Состояние Redux возвращается в состояние Inital

0 голосов
/ 21 апреля 2019

Я создаю веб-приложение, в котором пользователь выбирает ресторан на одном экране, и название ресторана сохраняется, а затем экран меню проверяет состояние для названия ресторана и получает пункты меню с сервера для этого ресторана. Когда я нажимаю кнопку в userscreen.js в первый раз, состояние не меняется, но меняется в следующий раз. Однако, когда я проверяю состояние из menu.js, это все еще инициализированное состояние, которое является пустым. Как заставить состояние не возвращаться к своему первоначальному значению?

Вот файлы, над которыми я работаю:

userscreen.js 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setRestaurant } from '../actions/restaurant';

class Userscreen extends Component {
constructor(props){
    super(props);

    this.state={
        r2:'',
    };
    this.handleClick1 = this.handleClick1.bind(this);
}

componentDidMount(){
    fetch('api/rest-ratings', {
      method: 'GET'
    })
    .then(res => res.json())
    .then(body =>{
        this.setState({r2: body.C})
    })
}

handleClick1(event){
    event.preventDefault()
    this.props.setRestaurant("ChopChop");
    console.log(this.props.rest)
}

render() {
    return (
        <div>
            <img src={user_background} alt="" style= {{width: "100%", height: "auto", margin:"0auto"}}/>
            <div id="btn2" onClick={this.handleClick1}>
                Chop Chop
                <div>
                <StarRatingComponent name="ChopChop" editing={false} starCount={5} value={parseInt(this.state.r2)}/>
                </div>
            </div>
        </div>
        );
    }
}

const mapStateToProps = (state) => ({
    rest: state.rest,
})

export  default connect(mapStateToProps, { setRestaurant })(Userscreen)

menu.js 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setRestaurant } from '../actions/restaurant';

class Menu extends Component {
constructor(props){
    super(props);
    this.state={
        rest1: 'abc',
    };
}

componentDidMount(){
        console.log("mine",this.state.rest1)
        console.log("store",this.props.rest)
}

render() {
    return (
        <div>
        {this.state.rest}
        </div>
    );
}
}

const mapStateToProps = (state) => ({
    rest: state.rest
})

export default connect(mapStateToProps, {setRestaurant})(Menu);

restaurant.js 

export const setRestaurant = (restaurant) => dispatch => {
    dispatch({
        type: 'SET_RESTAURANT',
        payload: restaurant
    })
}

restReducer.js 

 const initialState = {
    restaurant : ''
 }

export default function(state = initialState, action ) {
    switch(action.type) {
        case 'SET_RESTAURANT':
            return {
                ...state,
                restaurant: action.payload,
            }
        default: 
            return state;
    }
}

index.js 

import { combineReducers } from 'redux';
import errorReducer from './errorReducer';
import authReducer from './authReducer';
import restReducer from './restReducer';

export default combineReducers({
    errors: errorReducer,
    auth: authReducer,
    rest: restReducer
});

1 Ответ

0 голосов
/ 21 апреля 2019

Ваша функция связывания отправки должна быть определена как простой создатель действий, если она будет использоваться так же, как в export default connect(mapStateToProps, {setRestaurant})(Menu);: 

export const setRestaurant = restaurant => ({
    type: 'SET_RESTAURANT',
    payload: restaurant
})

См. определение mapDispatchToProps как объекта

Также обратите внимание, что функция mapStateToProps передает возвращенный объект через реквизиты (как следует из названия), поэтому использование тех, что были переданы в реквизитах, должно выполняться через this.props (вместо this.state) . 

return (
    <div>{this.props.rest.restaurant}</div> 
)
...