Реактивный компонент не обновляется при обновлении состояния - PullRequest
Новая
       9

Реактивный компонент не обновляется при обновлении состояния

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

Я использую реагирование, редукс и редукс-сагу для своего проекта.При извлечении списка пользователей, использующих Redux-saga, я вижу, что мое хранилище редуксов обновляется (я вижу это из инструмента redux dev), но в компоненте реквизиты не меняются.

Я использую кнопку для получения списка пользователей.И пользователи отображаются только в этом компоненте.

App.js 

import React, { Component } from 'react';
import { connect } from "react-redux";
import './App.css';
import { fetchUsers } from "./actions";
import { Row, Col, ListGroup, ListGroupItem } from "reactstrap";

class App extends Component {

  // eslint-disable-next-line no-useless-constructor
  constructor(props){
    super(props);
  }

  render() {
    console.log("in render func");
    console.log(this.props);
    return (
      <div className="App">
        <h2>Redux Saga App</h2>
        <Row>
          <Col sm={6}>

            {this.props.userList?this.props.userList.map((user)=>(
              user.first_name + user.last_name
            )) : ''}
          </Col>
        </Row>
        <button onClick={this.props.getUserList}>Click to get the users</button>
      </div>
    );
  }
}

const mapStateToProps = (state)=>{
  console.log("in map statetpprop");
  //console.log(state.userList);
  return {userList:state.userList}
}

const mapDispatchToProps = (dispatch)=>{
  return {getUserList :() => {dispatch(fetchUsers())}}
}


App = connect(mapStateToProps,mapDispatchToProps)(App);

export default App;

action.js 

export function fetchUsers(){
    return {
        type:'FETCH_USERS',

    }
}

reducer.js 

const initialState = {
    userList:[]
}
export function userReducer(state=initialState,action){
    switch(action.type){
        case 'ADD_USER':
            return Object.assign(state,{
                user:action.data
            })
        case 'SET_USERS':
            return Object.assign(state, {userList : action.data});
        default:
            return state;
    }
}

saga.js 

import {call, put , takeEvery , takeLatest } from 'redux-saga/effects';
import axios from 'axios';
import { setUsers } from "./actions";

export function fetchUsersFunc(userId){

    return axios.get('https://reqres.in/api/users');
}

function* fetchUsers(action){
    const users = yield call(fetchUsersFunc);
    console.log("in fetch users");

    if(users.data.data){
        const userList = users.data.data;
        console.log(userList);
        console.log(userList[0].first_name)
        yield put(setUsers(userList));
    }

}


export function* rootSaga(){
    yield [
        takeLatest('FETCH_USERS',fetchUsers)

    ];
}

Спасибо за помощь!

1 Ответ

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

Если вы используете Object.assign и хотите создать новую копию состояния, вам нужно сделать целевой объект новым пустым объектом вместо того, что вы делаете в данный момент (он мутирует объект state, которыйделает реакцию не в состоянии перерисовать).(Более подробную информацию о Object.assign см. В разделе https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign). Например: 

// copy previous state and new updates to a new empty object  
return Object.assign({}, state, {userList : action.data});

Я бы порекомендовал использовать оператор распространения вместо Object.assign, хотя: 

return {...state, userList : action.data}
...