Отображение через API-ответ от состояния, инициализированного редуксным действием

Question

Я пытаюсь отобразить возвращаемое состояние из редукса.

Это мой редуктор:

import { combineReducers } from 'redux'
import LibaryReducer from './LibraryReducer'
import ImportLibraryReducer from './ImportLibraryReducer'

let defaultState = {
    card: null
}


const mainReducer = (state = defaultState, action) => {
    if(action.type === "CHANGE_CARDS") {
        return {
            ...state,
            card: action.card
        }
    } else {
       return {
        ...state
       }
    }
}

export default mainReducer

Это мое действие:

import axios from "axios"

export function loadCards(){
    return(dispatch)=>{
        return axios.get('http://localhost:4000/reports')
                .then(response => {
                    dispatch(changeCards(response.data))
                })
    }
}

export function changeCards(cards) {
    return{
        type: "CHANGE_CARDS",
        card: cards
    }
}

Это мой компонент, который отображает в хранилище:

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import {Collapse,CollapseHeader, CollapseBody, AccordionList} from 'accordion-collapse-react-native';
import { connect } from 'react-redux'
import * as actions from '../actions'
import { loadCards } from '../actions'


class Card extends Component {

  componentDidMount() {
    value = this.props.loadCards()
  }

  render() {

    const titleStyle = {
      backgroundColor: '#edeeef',
      fontWeight: "bold",
      color: '#454647',
      fontSize: 16,
      left: 8,
      fontFamily: 'Ionicons',
      top: 10
    }

    const descMarkStyle = {
      left: 8,
      top: 4,
      fontFamily: 'Ionicons',
      color: '#454647',
      fontSize: 16
    }
console.log(this.props.state.card)
    return (
      <View>
        { 
          this.props.card != null ?
            this.props.state.card.map((v,i) => {
              return(
              <Collapse >
                <CollapseHeader>
                  <View
                    style={{
                      backgroundColor: '#edeeef',
                      height: 38,
                      postion: 'absolute',
                      borderBottomWidth: .5,
                      borderBottomColor: '#black'
                    }} 
                  >
                    <Text style={titleStyle}>
                      {v.title}
                    </Text>
                  </View>

                </CollapseHeader>
                <CollapseBody>
                  <Text style={descMarkStyle}>test</Text>
                  <Text style={descMarkStyle}>test</Text>
                </CollapseBody>
              </Collapse>
              )
            })
         : <Text>jhgkjhjhg</Text>
        }
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    state
   };
 }

 export default connect(mapStateToProps, { loadCards })(Card);

Когда компонент отображается в хранилище, я получаю такой результат: https://i.stack.imgur.com/giA6u.png

Это состояние по умолчанию и рендеринг.

Мой вопрос: какова наилучшая практика для рендеринга информации из вызова API в Redux?Как я мог справиться с этой ситуацией с помощью контроллера действий, который вызывает API?Есть ли способ для меня игнорировать начальное состояние?

Answer 1

Прежде всего вам следует избегать использования троичного оператора в JSX, я бы порекомендовал вам создать функцию.

renderCard = () => {
  const { card } = this.props.state;
  if (card) {
    card.map((v, i) => (
      <Collapse>
        <CollapseHeader>
          <View
            style={{
              backgroundColor: '#edeeef',
              height: 38,
              postion: 'absolute',
              borderBottomWidth: 0.5,
              borderBottomColor: '#black'
            }}
          >
            <Text style={titleStyle}>{v.title}</Text>
          </View>
        </CollapseHeader>

        <CollapseBody>
          <Text style={descMarkStyle}>test</Text>
          <Text style={descMarkStyle}>test</Text>
        </CollapseBody>
      </Collapse>
    ));
  }

  return <Text>jhgkjhjhg</Text>;
}

render = () => {
  return (
    <View>
      {this.renderCard()}
    </View>
  );
}

После этого вам не нужно присваивать this.props.loadCards() переменной. Ваш componentDidMount должен выглядеть так:

componentDidMount() {
  this.props.loadCards()
}

Последний совет, я бы предпочел установить defaultState на неопределенное, а не на ноль.

Надеюсь, это будет полезно! :) Если вам что-то нужно или у вас есть другие сомнения, просто дайте мне знать!

Answer 2

Do объект деструктурируется в вашем mapStateToProps для устранения this.props.state.

function mapStateToProps(state) {
  const defaultCard = { title: 'some title' };
  const card = state.card || [defaultCard]; // show default card
  return {
    card,
  };
}

// in component render
return (
  <View>
  { this.props.card.map((v,i) => { ... }) }
  </View>
);

Answer 3

Ваша логика проверки неверна.

Используйте

this.props.state.card != null ?

Вместо

this.props.card != null ?

Но лучшее решение:

function mapStateToProps({ card }) {
  return {
    card
  };
}

и

this.props.card
  ? this.props.card.map(~)
  : ~

В конце концов, ваша функция рендера будет использовать состояние по умолчанию хотя бы один раз. Таким образом, вы должны справиться с этим.