Redux商店没有更新

debugcn 发表于 Dev

哈莫哈姆迪

我已经使用构建了此应用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
  }
});

任意的

我猜您忘记了从操作文件中导出类型，因此switch(action.type)不会触发所需的case语句。

也许尝试添加以下内容：

export const ADD_DECK = "ADD_DECK";
export const ADD_CARD = "ADD_CARD";

或进一步调试只是看这些值是否是您要寻找的值：

export default function decks(state = {}, action) {
    console.log({type:action.type, ADD_DECK}); // see what values the app has

    // further code ...
}

希望对您有所帮助！如果没有，请通知我，以便我们进一步进行故障排除。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。