Question

我不知道这里发生了什么，我在React Native中正确使用这种技术，但在ReactJS中不起作用

控制台只记录“外部”而不是“内部”，也没有提供还原日志。

申请入境点：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { authStateReducer } from './reducers/auth.js'
import { wishesStateReducer } from './reducers/wishes.js'

const root = combineReducers({ 
    auth: authStateReducer,
    wishes: wishesStateReducer
})

let store = createStore(root, applyMiddleware(thunk, logger))

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);
registerServiceWorker();

像这样导出根组件：

function stateToProps(state) {
  return { AUTH: state.auth, WISHES: state.wishes }
}

function dispatchToProps (dispatch) {
  return {
    registerAuthStateListener: () => { dispatch(registerAuthStateListener) }, 
    fetchWishes: () => { dispatch(fetchWishes) }
  }
}

export default connect(
  stateToProps,
  dispatchToProps
)(App);

我正在调用componentDidMount（）中的操作：

  componentDidMount () {
    this.props.registerAuthStateListener()
    this.props.fetchWishes()
  }

从未激活的示例thunk：

import firebase from 'firebase'

export function fetchWishes () {
    console.log("Outside")
    return async (dispatch) => {
        console.log("Inside")
        let querySnapshot = await firebase.firestore().collection('wishes').get()


        let newState = []

        querySnapshot.forEach((wish) => {
            newState.push({
                id: wish.id,
                ...wish.data()
            })
        })

        dispatch({
            type: 'WISHES_FETCHED',
            data: newState
        })
    }
}

减速器示例：

const INITIAL_WISHES_STATE = {
    wishes: []
}

export function wishesStateReducer (state = INITIAL_WISHES_STATE, action) {
    switch (action.type) {
        case 'WISHES_FETCHED':
            return {
                wishes: action.data
            }

        default:
            return state
    }
}

Answer 1

function dispatchToProps (dispatch) {
  return {
    registerAuthStateListener: () => { dispatch(registerAuthStateListener()) }, 
    fetchWishes: () => { dispatch(fetchWishes()) }
  }
}

我并非致电 thunk行动创作者。

Answer 2

代码中的其他所有内容看起来都不错，但我对此部分不太确定：

return async (dispatch) => {

尝试将其更改为：

return (dispatch) => {

applyMiddleware（）被忽略了？ redux-thunk永远不会触发回调，redux-logger不会记录，一切都做对了

2 个答案: