Reducer中的状态更改后，组件未重新渲染

Question

假设我有一个链接，当单击该链接时，会将一个随机数添加到状态对象中称为queue的数组中。 整个state.queue数组显示在我的页面上，并在我们单击链接时更新。 我当前有一个链接，该链接应该做类似的事情，但是在我的化简器更改状态（向数组中添加新项）后，我的页面没有（重新？）呈现我的组件，因此该页面不会更新。

我应该怎么做才能在页面上显示整个state.queue，包括单击链接时动态更新？ 这是我所拥有的：

Channel.js

class Channel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            queue: [],
            // more initializations
        };
      ...
    }
    ...
    render() {  
        return (
            <div>
            {/*This part is never called because this.state.queue never has anything in it! */}
             {this.state.queue && 
                this.state.queue.length > 0 &&
                    <div>
                        <ul>
                            {this.state.queue.map((queuedItem, i) =>
                                <li key={i}>{queuedItem}</li>
                            )}
                        </ul>
                    </div>}


                <div>

                    <QResults
                        allQueryResults={this.state.queryState}
                        requestHandler={queueNewRequest}
                    />
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    const{queue} = state
    return {queue}
}

 function mapDispatchToProps(dispatch) {
    return ({
        queueNewRequest: (newRequestData) => { dispatch({type: newRequestData}) }
    })
} 

export default withRouter(connect(mapStateToProps , mapDispatchToProps )(Channel))

QResults.js

export default class QResults extends Component {
    render() {
        const {requestHandler} = this.props

        return (
            <ul>
                {this.props.allQueryResults.items.map((trackAlbum, i) =>
                    <li key={i}>
                        <a href='#' 
                        onClick={
                            () => requestHandler(trackAlbum.name)}>
                            Some link
                        </a>
                    </li>
                )}
            </ul>
        )
    }
}

actions.js

export const QUEUE_NEW_REQUEST = 'QUEUE_NEW_REQUEST'

export function queueNewRequest(newRequestInfo) {
    return dispatch => {
        dispatch({
            type: QUEUE_NEW_REQUEST,
            payload: newRequestInfo
        })
    }
}

reducers.js

import { combineReducers } from 'redux'

function reducer1(state = {}, action) {
    ...
}

function reducer2(state = {}, action) {
    switch (action.type) {
        case QUEUE_NEW_REQUEST:
             return {
                ...state,
                /*queue: [...state.queue,action.payload],*/ //compiler complains that 'TypeError: state.queue is not iterable'
                queue:[action.payload]
            } 
        default:
            return state
    }
}
const rootReducer = combineReducers({
    reducer1,
    reducer2
})

export default rootReducer

Answer 1

使用connect将state对象连接到props ，您将在props获得返回的对象。 请参阅： https : //react-redux.js.org/using-react-redux/connect-mapstate#return 。

所以，你只需要改变this.state.queue到this.props.queue在Channel.js文件。

而且您的组件没有渲染，因为它不依赖于更改的props 。 因此，进行上述建议的更改应该可以解决该问题。

Answer 2

this.state.queue指Channel组件本地的状态。 它不是redux状态。 您可以将this.state.queue初始化为一个空数组，然后再不对其进行更改（即，您永不调用this.setState ）。

如果要与Redux中的状态进行交互，则这就是mapStateToProps的来源。由于您有一个如下所示的mapStateToProps：

function mapStateToProps(state) {
    const{queue} = state
    return {queue}
}

Channel组件将获得一个名为队列的道具 ，您可以通过该队列与之交互。 道具排队。

因此，解决方法是更新Channel以与道具进行交互。 您很可能希望删除this.state.queue，因为它似乎没有作用，并且由于其名称而引起混乱。

{this.props.queue && 
  this.props.queue.length > 0 &&
    <div>
      <ul>
        {this.state.queue.map((queuedItem, i) =>
          <li key={i}>{queuedItem}</li>
        )}
      </ul>
    </div>
  }

此外，设置根缩减器的方式使redux状态看起来像这样：

{
  reducer1: {}, // not sure what this contains, since reducer 1 was omitted
  reducer2: {
    queue: [],
  }
}

因此，如果这确实是您想要的redux状态，那么您需要将props的地图状态更新为：

function mapStateToProps(state) {
    const {queue} = state.reducer2;
    return {queue};
}

Answer 3

除了有关将this.state.queue更改为this.props.queue所有响应this.props.queue ，我还需要做一些事情。 在我的reducer2初始化队列：

function reducer2(state = {queue:[]}, action) {
    switch (action.type) {
        case QUEUE_NEW_REQUEST:
            return {
                ...state,
                queue: [...state.queue,action.payload],
            }
        default:
            return state
    }
}

更改mapStateToProps在Channel.js：

function mapStateToProps(state) {
    const{queue} = state.reducer2
    return {queue}
}