React-redux组件不会在存储状态更改时重新呈现

时间:2016-07-30 20:36:19

标签: reactjs react-native redux react-redux

我现在正在学习反应和减少,但我无法弄清楚如何在状态改变后迫使组件重新渲染。

这是我的代码:

2

我可以触发更新的唯一方法是使用

Auth::user()->likes()->where('status_id', $status->id)->first() ? Auth::user()->likes()->where('status_id', $status->id)->first()->like == 1 ? 'You like this post' : 'Like' : 'Like'

内部构造函数,以便我手动触发组件的更新状态以强制重新呈现。

但我如何链接商店和组件状态?

2 个答案:

答案 0 :(得分:12)

如果组件的状态或道具发生变化,您的组件才会重新渲染。您不是依赖于this.state或this.props,而是直接在渲染函数中获取商店的状态。

相反,您应该使用connect将应用程序状态映射到组件道具。组件示例:

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

export class App extends React.Component {
    constructor(props, context) {
        super(props, context);
    }

    render() {
        return (
            <div>
            {this.props.isLoggedIn ? 'Logged In' : 'Not Logged In'}
            </div>
        );
    }
}

App.propTypes = {
    isLoggedIn: PropTypes.bool.isRequired
};

function mapStateToProps(state, ownProps) {
    return {
        isLoggedIn: state.isLoggedIn
    };
}

export default connect(mapStateToProps)(App);

在这个非常简单的示例中,如果商店的isLoggedIn值发生变化,它将自动更新组件上的相应道具,这将导致它呈现。

我建议您阅读react-redux文档以帮助您入门: http://redux.js.org/docs/basics/UsageWithReact.html

答案 1 :(得分:0)

我在这里结束了,因为我写了一个糟糕的减速器。我有:

const reducer = (state=initialState, action) => {
  switch (action.type) {
    case 'SET_Q':
      return Object.assign(state, {                     // <- NB no {}!
        q: action.data,
      })

    default:
      return state;
  }
}

我需要:

const reducer = (state=initialState, action) => {
  switch (action.type) {
    case 'SET_Q':
      return Object.assign({}, state, {                 // <- NB the {}!
        q: action.data,
      })

    default:
      return state;
  }
}