Question

我正在为此扯头发，我不知道是什么问题，而且我知道这很简单。

当我的index.js reducer设置为以下值时，它工作正常：

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
})

这是从另一个文件导入的reducer：

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

默认情况下尝试返回状态，而不是新对象。已在CombineReducers上验证过：

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

Answer 2

我认为问题在于，由于您正在使用CombineReducer，因此您需要在mapStateToProps时指定要使用的减速器，并且由于您在CombineReducer中将减速器的名称设置为card，因此您要在props和您正在尝试在组件中映射对象。您遇到什么错误？控制台日志this.props.card，您可能会看到一个对象。因此，在您的地图中，您需要映射this.props.card.card或在mapStateToProps中添加嵌套卡值，如下所示：

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

Cannon使Reduce可以在Redux的index.js导入中工作

2 个答案: