Javascript 为什么我单击按钮时没有从减速器获取数据？
我正在使用React和Redux构建一个简单的应用程序。有四个按钮：上、左、下、右。如果我单击“向上”，它会将项目向上移动，当我单击“向下”时，项目会向下移动，依此类推。但是，当我单击按钮时，项目根本不移动。更糟糕的是，当我点击控制台时，没有收到任何错误消息。以下是我目前的代码：Javascript 为什么我单击按钮时没有从减速器获取数据？,javascript,reactjs,redux,Javascript,Reactjs,Redux,我正在使用React和Redux构建一个简单的应用程序。有四个按钮：上、左、下、右。如果我单击“向上”，它会将项目向上移动，当我单击“向下”时，项目会向下移动，依此类推。但是，当我单击按钮时，项目根本不移动。更糟糕的是，当我点击控制台时，没有收到任何错误消息。以下是我目前的代码： import React from 'react'; import ReactDOM from 'react-dom'; import { Provider, connect } from 'react-redux';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, connect } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
const reducers = combineReducers({
vertical: (state={style: 40}, action) => {
console.log("Inside the vertial reducer", action.type);
if (action.type === "UP") {
//Reassign outside the return statement
state.style = state.style - 10;
return state;
} else if (action.type === "DOWN") {
state.style = state.style + 10;
return state;
} else {
return state;
}
},
horizontal: (state={style: 40}, action) => {
console.log("Inside the horizontal reducer", action.type);
if (action.type === "LEFT") {
state.style = state.style - 10;
return state;
} else if (action.type === "RIGHT") {
state.style = state.style + 10;
return state;
} else {
return state;
}
}
});
const a = state => {
return {
vertical: state.vertical.style,
horizontal: state.horizontal.style
};
};
const b = dispatcher => {
return {
clickUp: () => {
dispatcher({ type: "UP" })
},
clickDown: () => {
dispatcher({ type: "DOWN" })
},
clickLeft: () => {
dispatcher({ type: "LEFT" })
},
clickRight: () => {
dispatcher({ type: "RIGHT" })
}
};
};
const container = connect(a, b);
//This is my component
const C = ({ vertical, horizontal, clickUp, clickDown, clickLeft, clickRight }) => {
console.log("this is from C", vertical);
return (
<div>
<button onClick={clickUp}>Up</button>
<button onClick={clickDown}>Down</button>
<button onClick={clickLeft}>Left</button>
<button onClick={clickRight}>Right</button>
<img style={{top:vertical+"px", left:horizontal+"px", position:"absolute", width:"40px", height:"40px"}} src={"https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAglAAAAJDIwYjM0NDEwLTViMTMtNGE2Yi05OGZlLTUwOGE2N2IxMjFlOQ.jpg"} alt="" />
</div>
);
};
const App = container(C);
const store = createStore(reducers);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
registerServiceWorker();
从“React”导入React；
从“react dom”导入react dom；
从'react redux'导入{Provider，connect}；
从'redux'导入{createStore，combinereducer}；
导入“./index.css”；
从“./registerServiceWorker”导入registerServiceWorker；
常数减速机=组合减速机({
垂直：（状态={style:40}，动作=>{
log（“垂直减速器内部”，action.type）；
如果（action.type==“向上”）{
//在return语句之外重新分配
state.style=state.style-10；
返回状态；
}else if（action.type==“DOWN”）{
state.style=state.style+10；
返回状态；
}否则{
返回状态；
}
},
水平：（状态={style:40}，动作=>{
console.log（“水平减速器内部”，action.type）；
如果（action.type==“LEFT”）{
state.style=state.style-10；
返回状态；
}else if（action.type==“RIGHT”）{
state.style=state.style+10；
返回状态；
}否则{
返回状态；
}
}
});
常数a=状态=>{
返回{
垂直：state.vertical.style，
水平：state.horizontal.style
};
};
常量b=调度程序=>{
返回{
点击：（）=>{
调度程序（{type:“UP”}）
},
单击向下：（）=>{
调度程序（{type:“DOWN”}）
},
单击左：（）=>{
调度程序（{type:“LEFT”}）
},
单击右键：（）=>{
调度程序（{type:“RIGHT”}）
}
};
};
const container=connect（a，b）；
//这是我的组件
常量C=（{垂直、水平、向上单击、向下单击、向左单击、向右单击}）=>{
log（“这是从C开始的”，垂直）；
返回(
向上的
向下
左边
赖特
);
};
const App=容器（C）；
常量存储=创建存储（还原器）；
ReactDOM.render(
，document.getElementById（'root'）；
registerServiceWorker（）；
I
console.logverticalhorizontalCconsole.log时，当我单击按钮时，没有得到任何值。它应该在我的控制台中注销一个号码，但不是。因此，当我单击按钮时，似乎没有更新我的状态，而没有在控制台中显示任何错误。我检查了我的代码很多次，没有找到任何东西。请告诉我如何修复我的代码，以及为什么我的代码会无声地失败？在reducer中，您正在覆盖以前的状态，而不是创建新状态。Redux不会更新组件状态，因为它认为组件状态仍然与前一个相同，因此尝试优化重新提交程序过程，而不是这样做
将还原程序更新为以下内容，您的应用程序应按预期工作：
const reducers = combineReducers({
vertical: (state={style: 40}, action) => {
switch (action.type) {
case 'UP': {
return Object.assign({}, state, {
style: state.style - 10
});
}
case 'DOWN': {
return Object.assign({}, state, {
style: state.style + 10
});
}
default: {
return state;
}
}
},
horizontal: (state={style: 40}, action) => {
switch (action.type) {
case 'LEFT': {
return Object.assign({}, state, {
style: state.style - 10
});
}
case 'RIGHT': {
return Object.assign({}, state, {
style: state.style + 10
});
}
default: {
return state;
}
}
}
});
在reducer中，您将覆盖以前的状态，而不是创建新状态。Redux不会更新组件状态，因为它认为组件状态仍然与前一个相同，因此尝试优化重新提交程序过程，而不是这样做
将还原程序更新为以下内容，您的应用程序应按预期工作：
const reducers = combineReducers({
vertical: (state={style: 40}, action) => {
switch (action.type) {
case 'UP': {
return Object.assign({}, state, {
style: state.style - 10
});
}
case 'DOWN': {
return Object.assign({}, state, {
style: state.style + 10
});
}
default: {
return state;
}
}
},
horizontal: (state={style: 40}, action) => {
switch (action.type) {
case 'LEFT': {
return Object.assign({}, state, {
style: state.style - 10
});
}
case 'RIGHT': {
return Object.assign({}, state, {
style: state.style + 10
});
}
default: {
return state;
}
}
}
});
state.style=state.style-10
正在改变状态<如果执行此操作，则code>react-reduxstate.style=state.style-10