React/Redux 调度不触发减速器
[英] React/Redux dispatch not triggering reducer
本文介绍了React/Redux 调度不触发减速器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
努力从我的 React 组件中分派一个动作.这是我的第一个 Redux 应用程序.一切似乎都运行良好，但如果是这样，我就不会发布这个问题.我正在使用 Redux devTool 来调试我的应用程序.如果我使用 devTools 中的调度程序，我的减速器将毫无问题地触发.但是，我无法从我的 React 组件中发送相同的操作.我在我的操作中添加了一个断点以查看它是否被触发.我肯定是，它也返回一个有效的动作(类型和有效载荷).这是我的代码:
store.js
import {createStore, applyMiddleware, compose} from 'redux'从redux-logger"导入 {createLogger}从redux-thunk"导入 thunk从redux-promise-middleware"导入承诺从'./reducers/index'导入reducersconst 记录器 = createLogger()const store = createStore(减速机，window.__REDUX_DEVTOOLS_EXTENSION__ &&window.__REDUX_DEVTOOLS_EXTENSION__(),撰写(applyMiddleware(thunk, promise, logger)))导出默认存储
reducers (index.js)
从'redux'导入{combineReducers}从 './userReducer' 导入 userReducerconst allReducers = combineReducers({用户:userReducer})导出默认所有Reducers
client.js
从 'react' 导入 React从'react-dom' 导入 ReactDOM从react-redux"导入 {Provider}从./store"导入商店从./modules/router"导入路由器从 'material-ui/styles/MuiThemeProvider' 导入 MuiThemeProvider从'material-ui/styles/getMuiTheme'导入getMuiTheme从 './modules/theme' 导入 CustomTheme从'react-tap-event-plugin'导入injectTapEventPlugin要求('../scss/style.scss')//onTouchTap 需要//http://stackoverflow.com/a/34015469/988941注入TapEventPlugin();ReactDOM.render(<提供者商店={商店}><MuiThemeProvider muiTheme={CustomTheme}><路由器/></MuiThemeProvider></提供者>,document.getElementById('app'));
userReducer.js
导出默认函数(state = {loggedIn: false}, action) {console.log("这是减速器:状态:"，状态，" - 动作:"，动作)开关(动作.类型){案例登录":返回 {...状态，登录:action.payload}}返回状态；}
userActions.js
export const login = () =>{控制台日志(测试")返回 {类型:'登录'，有效载荷:真}}
login.js
从 'react' 导入 React从'react-dom' 导入 ReactDOM从 '../containers/loginform' 导入 LoginFormclass Login 扩展了 React.Component {使成为() {返回 (<登录表单/>)}}导出默认登录
loginform.js
import React, {PropTypes} from 'react'从'react-dom' 导入 ReactDOM从'react-router-dom'导入{重定向}从react-redux"导入 {connect}从../actions/userActions"导入 {login}从'material-ui/RaisedButton'导入RaisedButton从 'material-ui/TextField' 导入 TextFieldclass LoginForm 扩展 React.Component {构造函数(道具){超级(道具)}登录请求(e){e.preventDefault()this.props.login()}使成为() {返回 (<div><form className='login-form-container' onSubmit= {this.loginReq.bind(this)}><div className='login-form-row'><文本字段参考='电子邮件'提示文本='电子邮件'浮动标签文本='电子邮件'className='登录表单字段'/>
<div className='login-form-row'><文本字段参考='密码'提示文本='密码'浮动标签文本='密码'类型='密码'className='登录表单字段'/>
<div className='login-form-row'><凸起按钮type='提交'标签='登录'className='登录表单按钮'/>
</表单>
)}}const mapStateToProps = (状态) =>{返回 {登录:state.user.loggedIn}}const mapDispatchToProps = (调度) =>{返回 {登录: () =>调度(登录())}}导出默认连接(mapStateToProps, mapDispatchToProps)(LoginForm)
请你给我一些指导，告诉我如何调试以找出此调度不起作用的原因.我尝试将动作对象直接添加到该调度函数中.仍然没有运气.我在控制台中没有任何错误.我的 console.logs 仅在视图呈现和单击登录提交按钮时打印.
控制台截图
解决方案
终于找到了我的问题.我的中间件实现导致了这个问题.我错误地传入了 promise.应该是:
import {createStore, applyMiddleware} from 'redux'从redux-devtools-extension"导入 {composeWithDevTools}从redux-logger"导入 {createLogger}从redux-thunk"导入 thunk从redux-promise-middleware"导入承诺从'./reducers/index'导入reducersconst 记录器 = createLogger()const 中间件 = applyMiddleware(promise(), logger, thunk)const store = createStore(reducers, composeWithDevTools(middleware))导出默认存储
还发现 redux-devtools-extension 对于 Redux devTools 来说更干净.>
Struggling to dispatch an action from my React component. This is my first Redux app. Everything seems to be working fine, but if it was I would not be posting this question. I am using Redux devTool to debug my app. If I use the dispatcher from the devTools my reducer is triggered with no problem. However I am unable to dispatch the same action from my React components. I added a breakpoint in my action to see if it was being triggered. I definately is and it is also returning a valid action (type & payload). Here is my code:
store.js
import {createStore, applyMiddleware, compose} from 'redux'
import {createLogger} from 'redux-logger'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import reducers from './reducers/index'
const logger = createLogger()
const store = createStore(
reducers,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__(),
compose(
applyMiddleware(thunk, promise, logger)
)
)
export default store
reducers (index.js)
import {combineReducers} from 'redux'
import userReducer from './userReducer'
const allReducers = combineReducers({
user: userReducer
})
export default allReducers
client.js
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import store from './store'
import Router from './modules/router'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import CustomTheme from './modules/theme'
import injectTapEventPlugin from 'react-tap-event-plugin'
require('../scss/style.scss')
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider muiTheme={CustomTheme}>
<Router/>
</MuiThemeProvider>
</Provider>,
document.getElementById('app')
);
userReducer.js
export default function (state = {loggedIn: false}, action) {
console.log("THIS IS THE REDUCER: STATE: ", state, " - ACTION: ", action)
switch (action.type) {
case 'LOGIN':
return {...state, loggedIn: action.payload}
}
return state;
}
userActions.js
export const login = () => {
console.log("TEST")
return {
type: 'LOGIN',
payload: true
}
}
login.js
import React from 'react'
import ReactDOM from 'react-dom'
import LoginForm from '../containers/loginform'
class Login extends React.Component {
render() {
return (
<LoginForm/>
)
}
}
export default Login
loginform.js
import React, {PropTypes} from 'react'
import ReactDOM from 'react-dom'
import {Redirect} from 'react-router-dom'
import {connect} from 'react-redux'
import {login} from '../actions/userActions'
import RaisedButton from 'material-ui/RaisedButton'
import TextField from 'material-ui/TextField'
class LoginForm extends React.Component {
constructor(props) {
super(props)
}
loginReq(e){
e.preventDefault()
this.props.login()
}
render() {
return (
<div>
<form className='login-form-container' onSubmit= {this.loginReq.bind(this)}>
<div className='login-form-row'>
<TextField
ref='email'
hintText='Email'
floatingLabelText='Email'
className='login-form-field'/>
</div>
<div className='login-form-row'>
<TextField
ref='password'
hintText='Password'
floatingLabelText='Password'
type='password'
className='login-form-field'/>
</div>
<div className='login-form-row'>
<RaisedButton
type= 'submit'
label='Login'
className='login-form-button'/>
</div>
</form>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
loggedIn: state.user.loggedIn
}
}
const mapDispatchToProps = (dispatch) => {
return {
login: () => dispatch(login())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm)
Please could you give me some guidance to how else i can debug to find out why this dispatch is not working. I have tried adding the action object straight into that dispatch function. still no luck. I get no errors in the console nothing. My console.logs are only printed when the view renders and when i click on the login submit button.
Console Screenshot
解决方案
Finally found my issue. My middleware implementation was causing the issue. I was passing in promise incorrectly. Should be:
import {createStore, applyMiddleware} from 'redux'
import {composeWithDevTools} from 'redux-devtools-extension'
import {createLogger} from 'redux-logger'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import reducers from './reducers/index'
const logger = createLogger()
const middleware = applyMiddleware(promise(), logger, thunk)
const store = createStore(reducers, composeWithDevTools(middleware))
export default store
Also found that redux-devtools-extension was cleaner for Redux devTools.
这篇关于React/Redux 调度不触发减速器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
