Redux商店没有更新

时间:2019-12-07 09:41:39

标签: javascript react-native redux react-redux

我已使用create-react-native-app构建了此应用,已分派了动作,但状态尚未更新,我不确定为什么。

我看到正在记录操作(使用中间件记录器),但是商店没有更新,我现在仅在Add_Deck上工作

这是我的减速器:

// import 
import { ADD_CARD, ADD_DECK } from './actions'

// reducer
export default function decks(state ={}, action){
    switch(action.type){          
        case ADD_DECK: 
            return {
                ...state,
                [action.newDeck.id]: action.newDeck
            }

        case ADD_CARD: 
            return {
                ...state,
                [action.deckID]: {
                    ...state[action.deckID],
                    cards: state[action.deckID].cards.concat([action.newCard])

                }
            }

        default: return state 
    }
}

动作文件:

// action types
const ADD_DECK = "ADD_DECK";
const ADD_CARD = "ADD_CARD";

// generate ID function
function generateID() {
  return (
    "_" +
    Math.random()
      .toString(36)
      .substr(2, 9)
  );
}
// action creators

function addDeck(newDeck) {
  return {
    type: ADD_DECK,
    newDeck
  };
}
// export
export function handleAddDeck(title) {
  return dispatch => {
    const deckID = generateID();
    // const newDeck = { id: deckID, title, cards: [] };
    dispatch(addDeck({ id: deckID, title, cards: [] }));
  };
}


function addCard(deckID, newCard) {
  // { question, answer }, deckID
  return {
    type: ADD_CARD,
    deckID,
    newCard
  };
}

// export
export function handleAddCard(deckID, content) {
  // { question, answer }, deckID
  return dispatch => {
    const newCard = { [generateID()]: content };
    dispatch(addCard(deckID, newCard));
  };
}

还有react-native组件:

import React, { Component } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity } from "react-native";
import {red, white} from '../utils/colors'

import { connect } from 'react-redux'
import { handleAddDeck } from '../redux/actions'

class AddDeck extends Component {
    state = {
        text:""
    }

    handleSubmit = () => {
      this.props.dispatch(handleAddDeck(this.state.text))
        this.setState(()=>{
            return { text: ""}
        })
    }
    render() {
        return (
          <View style={styles.adddeck}>
            <Text> This is add deck</Text>
            <TextInput
            label="Title"
              style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
              onChangeText={text => this.setState({ text })}
              placeholder="Deck Title"
              value={this.state.text}
            />
            <TouchableOpacity style={styles.submitButton} onPress={this.handleSubmit}>
                <Text style={styles.submitButtonText}>Create Deck</Text>
            </TouchableOpacity>
          </View>
        );
    }
}

function mapStateToProps(decks){
  console.log("state . decks", decks)
  return {
    decks
  }
}

export default connect(mapStateToProps)(AddDeck);

const styles = StyleSheet.create({
  adddeck: {
    marginTop: 50,
    flex: 1
  },
  submitButton: {
    backgroundColor: red,
    padding: 10,
    margin: 15,
    height: 40,

  },
  submitButtonText: {
    color: white
  }
});

1 个答案:

答案 0 :(得分:1)

我猜您忘记了从操作文件中导出类型,因此df2不会触发所需的+--------+------------------------------------------+------------------------------------------+--------+------+ |category| end_time_array| start_time_array|lenStart|lenEnd| +--------+------------------------------------------+------------------------------------------+--------+------+ | A|[2017-01-18 00:00:00, 2017-01-27 00:00:00]|[2017-01-16 00:00:00, 2017-01-25 00:00:00]| 2| 2| | B|[2017-02-18 00:00:00, 2017-02-25 00:00:00]|[2017-02-14 00:00:00, 2017-02-21 00:00:00]| 2| 2| +--------+------------------------------------------+------------------------------------------+--------+------+ 语句。

也许尝试添加以下内容:

switch(action.type)

或者进一步调试,以查看值是否与您要查找的值相同

case

希望对您有所帮助!如果没有,请告诉我们,以便我们进行进一步的故障排除。