UI 没有更新 react 和 redux

Question

我是 react 和 redux 的初学者，我有在 API 上发布 JSON 然后接收列表的操作，这个操作从按钮单击调用，这所有过程都很好，但是在填充数据后 ui 没有更新

行动：

import * as types from './actionTypes'
import { postMessage } from '../api/messaging'

function postToAPI(msg, dispatch) {
  dispatch({ type: types.MESSAGE_POSTING });

  postMessage(msg, (messages) => {
    dispatch({
      type: types.MESSAGE_POST_DONE,
      messages: messages
    });
  });
}

export function postMessageAction(msg) {
  return (dispatch) => {
    postToAPI(msg, dispatch);
  }
}

减速机：

import * as types from '../actions/actionTypes'

const initialState = {
  messages: []
}

export default function messages(state = initialState, action) {
  switch(action.type) {
    case types.MESSAGE_POST_DONE:
      return {
        ...state,
        messages: action.messages
      }
      this.forceUpdate();
    default:
      return state;
  }
}

主容器：

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <CounterApp />
      </Provider>
    );
  }
}

CounterApp：

class CounterApp extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { state, actions } = this.props;
    return (
      <Messaging />
    );
  }
}

export default connect(state => ({
  messages: state.default.messages.messages
}))(CounterApp);

消息：

class Messaging extends Component {
  render() {
    return (
      <View>
        <MessageList messages={this.props.messages} />
        <Message />
      </View>
    )
  }
}
export default connect(state => ({
  messages: state.default.messages.messages
}))(Messaging);

留言列表：

export default class MessageList extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ScrollView>
        {
          this.props.messages.map((item, index) => {
            return (
              <Text>
                { item.body }
              </Text>
              )
          })
        }
      </ScrollView>
    )
  }
}

消息更改时，我的 MessageList 组件不会更新。我读到了 props 和 state 之间的区别，但我不知道如何将数据传递给 state。

更新：

我在消息连接中的状态看起来像我使用默认值的原因

有什么想法吗？

Answer 1

我注意到的一些事情是：

1. 据我所知，状态中没有default 对象（您写了messages: state.default.messages.messages）。
2. 你不应该在你的减速器中使用forceUpdate()。
3. 虽然它不会破坏任何东西，但CounterApp 组件使用connect 而不使用任何道具。

试试这个：

减速机：

import * as types from '../actions/actionTypes'

const initialState = {
  messages: []
}

export default function messages(state = initialState, action) {
  switch(action.type) {
    case types.MESSAGE_POST_DONE:
      return {
        ...state,
        messages: action.messages
      }
    default:
      return state;
  }
}

CounterApp：

class CounterApp extends Component {
  render() {
    return (
      <Messaging />
    );
  }
}

消息：

class Messaging extends Component {
  render() {
    return (
      <View>
        <MessageList messages={this.props.messages} />
        <Message />
      </View>
    )
  }
}

export default connect(state => ({
  messages: state.messages.messages
}))(Messaging);

Answer 2

我猜我会说你的连接语句想要成为

messages: state.messages 

而不是

messages: state.default.messages.messages.

此外，据我所知，我认为您不需要 CounterApp 中的 connect 语句，它什么也没做。

我不确定返回的消息是否应该替换或与现有消息合并，但您的减速器应该是

case types.MESSAGE_POST_DONE:
  return {
    messages: action.messages
  }

如果它正在替换现有列表或

case types.MESSAGE_POST_DONE:
  return {
    messages: [...state.messages, ...action.messages]
  }

如果你想合并它们。

Answer 3

您的代码看起来很奇怪。首先，您只需要在一个组件“消息传递”中连接到 redux

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

const mapStateToProps = state => ({
  messages: state.messages.messages
});
@connect(mapStateToProps);

class Messaging extends Component {
  static propTypes = {
    messages: PropTypes.object
  }
  render() {
    const { messages } = this.props;
    return (
      <View>
        <MessageList messages={messages} />
        <Message />
      </View>
    )
  }
}

然后像哑组件一样使用MessageList来接收和渲染数据。

  export default class MessageList extends Component {
    constructor(props) {
      super(props);
    }

    renderMessages(item, index) {
      return <Text>{item.body}</Text>;
    }

   render() {
     const { messages } =  this.props;

     return (
       <ScrollView>
        {messages.map((item, index) => this.renderMessages(item, index))}
      </ScrollView>
    );
  }
}