在 React/Redux 應用程序中顯示信息的問題

Question

所以，我正在嘗試轉換一個完整的 React 項目，將 Redux 添加到其中，以獲得更多的全局 state。 我在這里創建一個基於選擇的游戲。 不幸的是，我在嘗試向我的應用程序顯示我的 API 信息時遇到了問題。 說到 React/Redux，也許我還是個新手，但我真的迷路了。

提示.Js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import Choice from '../components/Choice'
import { loadPrompts } from '../actions/gameAction'

class PromptContainer extends Component {
    state = {
        id: (0),
        prompt: ""
    }
    
    componentDidMount() {
        this.props.loadPrompts()
    }


    render() {
        return (
        <div className='main-prompt'>
            <div className='current-prompt'>
            <h3>{prompt.id}</h3>
            <Choice />
            </div>
        </div>
    )}
}

const mapStateToProps = state => {
    return {
        prompt: state.prompt
    }
}

function mapDispatchToProps(dispatch) {
    return { loadPrompts: (prompt) => dispatch(loadPrompts(prompt)) }
}


export default connect (mapStateToProps, mapDispatchToProps) (PromptContainer)

rootReducer.js

const rootReducer = (state = {
    id: 0,
    choices: [],
    prompt: [],
    fetching: false
}, action) => {
    switch(action.type) {
        case "START_LOADING_GAME":
        case "LOAD_PROMPT":
            return {...state, prompt: action.prompt, fetching: true}
        case "LOAD_CHOICES":
            return {...state, choices: action.choices, fetching: true}

        case "SHOW_PROMPT":
            return{...state, prompt: action.id, fetching: false}
        case "SHOW_CHOICES":
            return{...state, choices: action.choices, fetching: false}  

        case "CHOICE_A_CHOSEN":
            return {...state, choiceA: action.routeRight, fetching: false}

        case "CHOICE_B_CHOSEN":
            return {...state, choiceB: action.routeLeft, fetching: false}    
        default:
            return state
    }
}

export default rootReducer

選擇Actions.js

const api = "http://choices-api.herokuapp.com/api/v1/games"

export function fetchChoices() {
    return(dispatch) => {
        dispatch({
            type: 'START_LOADING_GAME'
        })
        fetch(api)
        .then(res => res.json())
        .then(choices => dispatch({type: 'LOAD_CHOICE', choices}))
    }
}
export function showChoices(choices) {
    return {
        type: "SHOW_CHOICES",
        payload: {
            id: (0),
            choices
        }
    }
}

export function choiceAChosen(routeRight) {
    return {
        type: "CHOICE_A_CHOSEN",
        payload: routeRight
    }
}

export function choiceBChosen(routeLeft) {
    return {
        type: "CHOICE_B_CHOSEN",
        payload: routeLeft
    }
}

游戲動作.js

const api = "http://choices-api.herokuapp.com/api/v1/games"

export function loadPrompts() {
    return(dispatch) => {
        dispatch({
            type: 'START_LOADING_GAME'
        })
        fetch(api)
        .then(res => res.json())
        .then(prompt => dispatch({type: 'LOAD_PROMPT', prompt}))
    }
}

export function showPrompt(prompt) {
    return {
        type: "SHOW_PROMPT",
        payload: {
            id: (0),
            prompt
        }
    }
}

選擇.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { choiceAChosen, choiceBChosen } from '../actions/choiceAction'

class Choice extends Component {

    // handleAnswer() {
    //     this.props.choiceAChosen();
    //     this.props.choiceBChosen()
    // }
    
    render() {

        return (
            <div className='choice-select'>
                <div className='choiceA-selection'>
                    <button>{this.choiceA}</button>
                </div>
                <div className='choiceB-selection'>
                    <button>{this.choiceB}</button>
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        choice: state.choice
    }
}

const mapDispatchToProps = {
    choiceA: choiceAChosen,
    choiceB: choiceBChosen
}

export default connect(mapStateToProps, mapDispatchToProps) (Choice)

不知道我做錯了什么 - 就像我說的那樣，這很可能是因為我對我的理解仍然是新手。 我的頭腦目前很沮喪，我認為我在這里沒有清楚地思考。

Answer 1

在fetchChoices()中，Fn 中的最后一行輸入錯誤：

.then(choices => dispatch({type: 'LOAD_CHOICE', choices}))

...應該寫為LOAD_CHOICES和 'S' — 也許問題與這個錯字有關？

我還注意到，在您的 state 中，除了您在 Redux 操作中將其標記為true或false時，您有一個從未在代碼中其他任何地方調用的fetching屬性（我可以看到）。 那到底是做什么的，應該現在使用還是未來的功能尚未實現？