Реактивный компонент не перерисовывается при изменении состояния с помощью Redux - PullRequest
Новая
       5

Реактивный компонент не перерисовывается при изменении состояния с помощью Redux

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

Мое состояние меняется, как я вижу в консоли, но мой компонент Book не обновляется при изменении состояния.У меня есть два контейнера / компоненты в моем приложении.BookList, который отображает список всех доступных книг.Компонент Book просто получает activeBook и отображает его детали.Я сталкиваюсь с проблемой повторного представления на Компоненте Книги. 

import React, {Component} from 'react';
import {connect} from 'react-redux';

class Book extends Component{

    render(){
        return(
            <div className="col-md-9 details">
                <h3>Title: {this.props.activeBook.name}</h3>
                <p><b>Author:</b> {this.props.activeBook.author}</p>
                <p><b>Pages:</b>{this.props.activeBook.pages}</p>
                <p><b>Available:</b>{this.props.activeBook.aval}</p>
                {console.log(this.props)}
            </div>
        );
    }

}

const mapStateToProps = (state) =>{
    return {
        activeBook: state.active
    }
}


export default connect(mapStateToProps)(Book);

Мой компонент BookList выглядит следующим образом 

import React, {Component} from 'react';
import {connect} from 'react-redux';


class BookList extends Component{

    renderList(){
        return this.props.books.map((book)=>{
            return(
                <li 
                    key={book.id} 
                    onClick={() => this.props.dispatch({type:'CHANGED',activeBook:book})}
                    className="list-group-item">
                    {book.name}
                </li>
            );
        });
    }

    render(){
        return(
            <div className="col-md-3">
                <ul className='list-group'>
                    {this.renderList()}
                </ul>
            </div>
        );
    }

}
const mapStateToProps = (state) => {
    return {
        books:state.books
    }
}
export default connect(mapStateToProps)(BookList);

Мой App.js выглядит следующим образом: - 

import React, { Component } from 'react';


//Import All Components Here
import BookList from './containers/BookList';
import Book from './components/Book';

class App extends Component {


  render() {
    return (
      <div className="container">
        <div className="App">
          <div className="row">
            <BookList/>
            <Book/>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

и, наконец, мой bookReducer выглядит следующим образом: - 

const bookReducer = (state = [], action) => {

    switch(action.type){
        case 'CHANGED':
            state.active=action.activeBook;
            return state;
        default:
            return state;
    }

}

export default bookReducer;

Я точно вижу в своей консоли, что состояние изменяется, но проблема в том, что Book Container не отвечает на это изменение.В index.js это мой код 

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider} from 'react-redux';

import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';

import bookReducer from './reducers/bookReducer';

const initialState={
    books:[
      {id:1,name:'Learn Java', author:'Shakeel', pages:50,aval:'Yes'},
      {id:2,name:'React Native', author:'Asim', pages:212,aval:'No'},
      {id:3,name:'Angular JS', author:'Tahir', pages:150,aval:'Yes'},
      {id:4,name:'NodeJS', author:'Saleem', pages:120,aval:'Yes'},
      {id:5,name:'C++ for Games', author:'Shakeel', pages:140,aval:'Yes'}
    ],
    active:{id:5,name:'C++ for Games', author:'Shakeel', pages:140,aval:'Yes'}
  };

const store = createStore(bookReducer,initialState);




ReactDOM.render(<Provider store={store}>
    <App /></Provider>, 
    document.getElementById('root'));

1 Ответ

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

Необходимо изменить способ установки состояния в редукторе, попробуйте это изменение. 

const bookReducer = (state = [], action) => {

switch(action.type){
    case 'CHANGED':

        return {
           ...state,
           active : action.activeBook
        }
    default:
        return state;
    }

}
...