Cannon заставил редуктор работать в импорте index.js для Redux

Question

Я тяну себя за это, я не могу понять, в чем проблема, и я знаю, что это что-то простое.

Когда для моего редуктора index.js установлено следующее, этоработает нормально:

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

Однако, когда я пытаюсь импортировать его из другого файла, он ломается.

Это исправленный index.js:

import { combineReducers } from 'redux'
import { LibraryReducer } from './LibraryReducer'
import { LikeReducer } from './like.reducer'



export default mainReducer = combineReducers({
    card: LibraryReducer
})

Это редуктор, импортированный из другого файла:

let defaultState = {
    card: null
}


export function LibraryReducer(state = defaultState, action){
    if(action.type === "CHANGE_CARDS") {
        return {
            ...state,
            card: action.card
        }
    } else {
       return {
        ...state
       }
    }
}

Это мой index.js из моей папки действий:

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(card) {
    return{
        type: "CHANGE_CARDS",
        card: card
    }
}

export function createLike(like){
    return(dispatch)=>{
        console.log('got here', like)
        return axios.post('http://localhost:4000/likes/add', like)
                .then(response => {
                    dispatch(setLike(response.data))
                })
    }
}

export function setLike(like) {
    return{
        type: "ADDED_LIKE",
        like: like
    }
}


export function countMore(count) {
    return{
        type: "ADDED_LIKE",
        count: count
    }
}

Это компонент моих карт, где я рендерингинформация:

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, createLike, changeCards } from '../actions'
import LikeUnlike from './LikeUnlike'



class Card extends Component {

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

  render() {

    console.log('in card', this.props)

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

    const descMarkStyle = {
      left: 6,
      top: 4,
      fontFamily: 'Ionicons',
      color: '#454647',
      fontSize: 13
    }



    return (
      <View style={{position: 'relative'}} >
        { 
          this.props.card != null ?
            this.props.card.map((v,i) => {
              return(
              <View key={i}>
                <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}>{v.summary}{'\n'}</Text>
                    <Text style={descMarkStyle}>{v.analysis}</Text>
                  </CollapseBody>
                </Collapse>

                <View
                  style={{
                    position: 'absolute',
                    right: 4
                  }}
                >
                  <LikeUnlike
                    like={v.like}
                    id={v._id}
                  />
                </View>
            </View>
              )
            })
         : <Text>{''}</Text>
        }
      </View>
    );
      }

}

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

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

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

Answer 1

Я думаю, что проблема в том, что, поскольку вы используете combReducer, вам нужно указать, какой редуктор вы используете, когда вы используете mapStateToProps, и, так как в вашем CombineReducer вы устанавливаете это имя редуктора на карту, вы добавляете значение вложенной карты в свой реквизит иВы пытаетесь отобразить объект в вашем компоненте.Какие ошибки вы получаете?Консольный журнал this.props.card и вы, вероятно, увидите объект.Поэтому на вашей карте вам нужно отобразить this.props.card.card или в вашем mapStateToProps добавить значение вложенной карты, например, так:

function mapStateToProps(state) {
  return {
    card: state.card.card
   }
 }

Answer 2

попытаться вернуть состояние, а не новый объект, по умолчанию.Это проверено в combReducers:

export function LibraryReducer(state = defaultState, action){
    if(action.type === "CHANGE_CARDS") {
        return {
            ...state,
            card: action.card
        }
    } else {
       return state
    }
}