Блог

Главная - Вопросы по программированию - Почему мои действия не отправляются, когда они передаются обработчикам событий

Почему мои действия не отправляются, когда они передаются обработчикам событий

#javascript #reactjs #redux #react-redux

#javascript #reactjs #redux #реагировать-redux

Вопрос:

Это мой первый проект react redux, предполагается, что он выполняет простое увеличение или уменьшение, но действия не отправляются, когда они передаются обработчику событий, хотя они работают вне их. Это код, содержащийся в моем Redux.js файл

 import React from "react";
import  { createStore } from "redux";
import "./Redux.css"
const reducer=(state,action)=>
{
    if(action.type==="INCREASE") return {count:state.count 1}
    if(action.type==="DECREASE") return {count:state.count-1}
    return state
}
const store=createStore(reducer,{count:0})
const dec=()=>store.dispatch({type:"DECREASE"}) //not working

//store.dispatch({type:"DECREASE"}) //this works
const Redux=()=>
<div>
    <button onClick={()=>{store.dispatch({type:"INCREASE"})/*not working*/}}>INC</button> {store.getState().count }  
    <button onClick={dec}>DEC</button>
</div>
export default Redux;

Ответ №1:

Подпишите свою функцию на «прослушиватель изменений», который будет вызываться каждый раз, когда отправляется действие. В вашем случае вам нужно добавить store.subscribe(Redux) после функции Redux .

Вы можете узнать больше об этом здесь: https://redux.js.org/api/store#subscribelistener

Ваш полный код должен выглядеть следующим образом:

 import React from "react";
import  { createStore } from "redux";
import "./Redux.css"
const reducer=(state,action)=>
{
    if(action.type==="INCREASE") return {count:state.count 1}
    if(action.type==="DECREASE") return {count:state.count-1}
    return state
}
const store=createStore(reducer,{count:0})
const dec=()=>store.dispatch({type:"DECREASE"}) //not working

//store.dispatch({type:"DECREASE"}) //this works
const Redux=()=>
<div>
    <button onClick={()=>{store.dispatch({type:"INCREASE"})/*not working*/}}>INC</button> {store.getState().count }  
    <button onClick={dec}>DEC</button>
</div>
store.subscribe(Redux) // <= Add this line
export default Redux;

Комментарии:

1. Попробовал, это не работает, я обнаружил, что это неправильный шаблон, и мое приложение должно быть обернуто вокруг поставщика, затем используйте connect, который обрабатывает подписку на магазин, но мне интересно, почему это не работает даже после добавления store.subscribe (Redux)

2. Да, это верно. Обычно вы оборачиваете все приложение провайдером, но это не единственный способ. Это должно сработать, мы чего-то не хватает. Посмотрите на codepen codepen.io/supermodo/pen/gOMEpOg

3. Это работает в codepen, я понятия не имею, почему это не работает в моем chrome / firefox (работает из vs code)

4. Вы получаете какую-либо ошибку в консоли Chrome / Firefox devtools?

5. Просто проверил еще раз, нет, я этого не делаю.