Как рендерить стоимость обновленного магазина одним нажатием кнопки? - PullRequest
Новая
       12

Как рендерить стоимость обновленного магазина одним нажатием кнопки?

0 голосов
/ 10 июля 2020

Я пытаюсь понять, как работает React и redux. Как я могу получить значение магазина после нажатия этих трех кнопок. Я получаю вывод на консоль, но хочу, чтобы он отображался на экране .. 

import React, { Component } from 'react';
import {createStore} from 'redux';
class Store extends Component {
    render() { 
        const reducer=(state=0,action)=>
        {
            if(action.type==="UPDATE_BONUS")
            {
                return state+action.payload
            }
            if(action.type==="LEVEL_COMPLETED")
            {
                return state+action.payload
            }
            if(action.type==="LIFE_LOST")
            {
                return state-action.payload
            }
            return state;
        }
        const store=createStore(reducer,0);
        store.subscribe(()=>{
            console.log(store.getState());
        })
        const handleUpdateBonus=()=>
        {
        store.dispatch({type:"UPDATE_BONUS",payload:100});
        return (<div>{store.getState()}</div>)
        }
        const handleLevelCompleted=()=>
        {
        store.dispatch({type:"LEVEL_COMPLETED",payload:500});
        return (<div>{store.getState()}</div>)
        }
        const handleLifeLost=()=>
        {
        store.dispatch({type:"LIFE_LOST",payload:250});
        return (<div>{store.getState()}</div>)
        }
        return ( <div>{store.getState()}<button onClick={handleUpdateBonus}>Update-Bonus</button><button onClick={handleLevelCompleted}>Level-Completed</button><button onClick={handleLifeLost}>Life-Lost</button></div> );
    }
}
export default Store;

1 Ответ

1 голос
/ 10 июля 2020

Проблема здесь в том, что store.getState () будет вычисляться один раз при рендеринге. Поскольку состояние изначально равно нулю, оно всегда будет показывать ноль. Вы хотите, чтобы компонент перерисовывался каждый раз при изменении состояния!

Чтобы это произошло, вам необходимо подключить компонент к хранилищу. Я бы рекомендовал прочитать документацию Redux о том, как это сделать.

...