Reducx 라우터 - "Dispatch가 정의되지 않음"

Reducx 라우터 - "Dispatch가 정의되지 않음"

사용자가 페이지를 로드할 때 액션을 호출하는 간단한 구성요소를 가지고 있는데 그 액션 내부에서는 다른 액션을 파견하여 액션을 설정하려고 한다.loggedIn스토어의 참 또는 거짓 상태:

import React, { Component } from 'react'
import { Link, browserHistory } from 'react-router'
import $ from 'jquery'

class Login extends Component {

  constructor(props) {
    super(props)
  }
  componentDidMount() {
    this.props.actions.guestLoginRequest()
  }
  render() {
    return (
      <div>
        <div classNameName="container">
          <div className="row">
            We are signing you in as a guest
          </div>
        </div>
      </div>
    )
  }
}

export default Login

다음에 로그인 정보를 얻을 수 있다.guestLoginRequest액션이 호출되지만, 내가 그 안에 다른 액션을 파견하려고 할 때, 아무 일도 일어나지 않는다.

guestLoginRequest: function(){
    var ref = new Firebase("https://penguinradio.firebaseio.com");
    ref.authAnonymously(function(error, authData) {
      if (error) {
        console.log("Login Failed!", error);
      } else {
        console.log("Authenticated successfully with payload:", authData);
        return dispatch => {
          dispatch(actions.setLoginStatus(true, authData))
          console.log("dispatched");
        };
      }
    });
  }

에 오류가 있다Uncaught ReferenceError: dispatch is not defined내가 그것을 제거할 때return dispatch => { }명세서내 상점에서 나는 Redex-thunk를 사용하고 있다. 그래서 나는 행동의 내부를 파견할 수 있다.

// Store.js
import { applyMiddleware, compose, createStore } from 'redux'
import rootReducer from './reducers'
import logger from 'redux-logger'
import thunk from 'redux-thunk'

let finalCreateStore = compose(
  applyMiddleware(thunk, logger())
)(createStore)


export default function configureStore(initialState = { loggedIn: false }) {
  return finalCreateStore(rootReducer, initialState)
}

내 app.js의 소품에도 디스패치를 매핑하고 있다.

function mapStateToProps(state) {
  return state
}
function mapDispatchToProps(dispatch) {
  return {
      actions: bindActionCreators(actions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

도움이 될 수 있다면, 여기 제 의뢰인과 환원기 파일이 있다.

// client.js
import React from 'react'
import { render } from 'react-dom'
import App from '../components/App'
import configureStore from '../redux/store'
import { Provider } from 'react-redux'


let initialState = {
  loggedIn: false
}

let store = configureStore(initialState)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
)
// Reducer.js
import { combineReducers } from 'redux'

let LoginStatusReducer = function reducer(loggedIn = false, action) {
  switch (action.type) {
    case 'UPDATE_LOGIN_STATUS':
      return loggedIn = action.boolean
    default:
      return loggedIn
  }
}
export default LoginStatusReducer

const rootReducer = combineReducers({
  loggedIn: LoginStatusReducer
})

export default rootReducer

왜 내 파견 기능이 작동하지 않는지 알아?내 상점에 환원 스컹크를 설치해서 헷갈리고, 전화할 때 문서와 비슷한 코드를 사용하고 있어.return dispatch => { }내가 놓친 게 있나?어떤 조언이라도 미리 고마워!

당신은 thunk 미들웨어를 활용할 수 있는 기능을 반환하기 위해 당신의 행동이 필요하다. 그러면 reducx는 그 안에 디스패쳐를 주입할 것이다.발송인 호출과 구현 세부사항을 혼동하셨습니다.다음 조각은 두 결점을 모두 수정한다.

guestLoginRequest: function(){
  return function (dispatch) {
    var ref = new Firebase("https://penguinradio.firebaseio.com");
    ref.authAnonymously(function(error, authData) {
      if (error) {
        console.log("Login Failed!", error);
      } else {
        console.log("Authenticated successfully with payload:", authData);
        dispatch(actions.setLoginStatus(true, authData))
        console.log("dispatched");
      }
    });
  }
}

게다가, 당신은 당신의 행동을 정확하게 파견할 필요가 있다.Login계급의

dispatch(this.props.actions.guestLoginRequest())

작업 호출은 항상 호출에 의해 수행됨dispatch흐름은 다음과 같아야 한다.

React component --> dispatch ---> API call (thunk middleware) --> dispatch ---> reducer

참조URL: https://stackoverflow.com/questions/36462284/redux-router-dispatch-is-not-defined