React Native 和 Redux：状态更改后组件不会重新渲染答案

【问题标题】：React Native and Redux: Component doesn´t rerender after state changedReact Native 和 Redux：状态更改后组件不会重新渲染
【发布时间】：2018-12-12 22:41:56
【问题描述】：

我有一个连接到我的商店的组件。该组件调度一个 Action 并正确更改状态 (see Logs)。但是我的组件应该显示这种状态变化。但它不会重新渲染。

这是我的代码：

我的 Redux store、reducer 和 Action 是这样的：

//store.js
import { createStore, applyMiddleware } from 'redux';
import  thunk  from 'redux-thunk'
import { logger } from 'redux-logger'

import reducer from "./src/reducers/index"

const middleware=applyMiddleware(thunk, logger)
export default store = createStore(reducer, middleware);


//reducers/index.js
const initialState = {
    isLoggedIn:false,
}
export default loginReducer=(state = initialState, action) => {
  switch (action.type) {

  case "LOGGED_IN":
    return { ...state, isLoggedIn:true };

  default:
    return state
  }
};


//actions.js
export const logIn = (token) => ({
  type: "LOGGED_IN",
  payload: token
})

我的 React Native 应用是这样包装的：

import { AppRegistry } from 'react-native';
import App from './src/App';
import React from 'react';
import { Provider } from 'react-redux';
import store from './store'

/**
 * Wrap App in Redux Provider
 */
const MainApp = () => (
    <Provider store={store}>
        <App />
    </Provider>
)
AppRegistry.registerComponent('SalesforcegoesmobleReactNative', () => MainApp);

最后是我希望在状态更改后更新状态并重新渲染的组件：

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import { connect } from "react-redux"
import { logIn } from '../actions/actions';

@connect(
    (state) => {
        return {
            isLoggedIn: state.isLoggedIn
        }
    },
    (dispatch) => {
        return {
            updateLogin: id => dispatch(logIn(id))
        }
    }
)
export class InvoiceList extends Component {
    render() {
        console.log("rendering...")
        return (
            <View>
                <Button title="Update Login" onPress={() => this.props.updateLogin("test")} />
                <Text>{this.props.isLoggedIn ? "true" : "false"}</Text>
            </View>
        );
    }
}

所以你可以看到状态正确地改变了。但在那之后，我希望组件再次渲染（“渲染...”在控制台和文本标签中显示 true 而不是 false）

我没有看到错误。你能帮帮我吗？

【问题讨论】：

标签： reactjs react-native redux react-redux

【解决方案1】：

尝试在 connect 中定义类似的 isLoggedIn 值：

(state) => {
        return {
            isLoggedIn: state.loginReducer.isLoggedIn
        }
    }

【讨论】：