Question

我正在学习Redux，在尝试使用redux-thunk时遇到了一个问题。我正在使用Redux作为我使用this构建的Chrome扩展程序。这是我目前的设置：

Index.js：

import {applyMiddleware,createStore} from 'redux';
import combineReducers from './reducers/index';
import {wrapStore} from 'react-chrome-redux';
import thunk from 'redux-thunk';

const middleware = applyMiddleware(thunk);
const store = createStore(combineReducers,{}, middleware);

store.subscribe(() => {
  console.log(store.getState().lastAction);
});

wrapStore(store, {
  portName: 'example'
});

减速器/ index.js：

import {combineReducers} from 'redux';
import userAuthReducer from './userAuthReducer';
import manageTeamsReducer from './manageTeamsReducer';

function lastAction(state = null, action) {
  return action;
}

export default combineReducers({
  lastAction,userAuthReducer,manageTeamsReducer
});

manageTeamsReducer：

const initialState = {
  userTeams: []
};

const manageTeamsReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USER_TEAMS': {
      const newState = Object.assign(state, {
        userTeams:action.teams
      });
      return newState;
    }
    default:
      return state;
  }
}

export default manageTeamsReducer;

actions.js

export const getUserTeams = () => {

// if I uncomment the below block and make it a normal action then it works as desired
/*  return {
        type: "SET_USER_TEAMS",
        teams:[{_id:"asd",name:"fwewef"}]       
    }*/

//this action below is the thunk action that currently does not work
 return dispatch => {
      dispatch({
        type: "SET_USER_TEAMS",
                teams:[{_id:"asd",name:"fwewef"}]
      });
  };
};

组件：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import { bindActionCreators } from 'redux';
import * as authActions from '../../../../../../event/src/actions/userAuthActions';
import * as teamActions from '../../../../../../event/src/actions/manageTeams';

var cookies = require('browser-cookies');

class Login extends Component {

login(event) {
  this.props.actions.authActions.setUserLoggedInState(true)
  this.props.actions.teamActions.getUserTeams()     
}

  render() {
    return (
      <div className="login-par">
                <div onClick={this.login.bind(this)}></div>             
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
        manageTeamsReducer:state.manageTeamsReducer
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
        actions:{
            authActions: bindActionCreators(authActions,dispatch),
            teamActions: bindActionCreators(teamActions,dispatch)
    }}
};

export default connect(mapStateToProps,mapDispatchToProps)(Login);

如果在组件中单击时触发this.login函数，则应该触发这两个操作。第一个动作：this.props.actions.authActions.setUserLoggedInState(true)没有问题，并且完全应该做到了。这是因为它是一个常规的Redux动作，它只返回一个带有类型和有效负载的对象。

然而，第二个动作需要是一个Thunk，无论我如何重新安排我的代码，我在网上找到的例子似乎无法让它工作。如果我取消注释actions.js中的第一个return语句并注释掉第二个return语句，从而使它成为常规操作，那么它工作正常，但我需要能够使用Thunk。

不确定是否有人可以发现我是否可能设置Redux-Thunk错误或其他什么？

注意：由于我正在使用的react-chrome-redux软件包，有可能有不同的方法来实现它，但我看到有人使用相同的软件包，如here和安装时他们的包装似乎已经设法让它工作正常 - 但我不明白为什么我的工作不起作用。

修改

我按照Sidney的建议实施了别名如下：

Index.js：

import {applyMiddleware,createStore} from 'redux';
import combineReducers from './reducers/index';
import {wrapStore,alias} from 'react-chrome-redux';
import thunk from 'redux-thunk';
import aliases from './aliases/aliases';

const middlewares = applyMiddleware([alias(aliases), thunk]);
const store = createStore(combineReducers,{}, middlewares);

store.subscribe(() => {
  console.log(store.getState().lastAction);
});

wrapStore(store, {
  portName: 'example'
});

Aliases.js

const getUserTeams = (orginalAction) => {
  return (dispatch, getState) => {
      dispatch({
        type: "SET_USER_TEAMS_RESOLVED",
                teams:[{_id:"asd",name:"it worked!"}]   
      });
  };
};

export default {
  'SET_USER_TEAMS': getUserTeams // the action to proxy and the new action to call
};

actions.js

export const getUserTeams = () => {
    return {
        type: "SET_USER_TEAMS",
        teams:[]        
    }
};

reducer.js

const initialState = {
  userTeams: []
};

const manageTeamsReducer = (state = initialState, action) => {
    console.log(action)
  switch (action.type) {
    case 'SET_USER_TEAMS_RESOLVED': {
      const newState = Object.assign(state, {
        userTeams:action.teams
      });
      return newState;
    }
    default:
      return state;
  }
}

export default manageTeamsReducer;

组件

组件中没有任何变化，因为我的理解是我仍然应该调度相同的操作：

this.props.actions.teamActions.getUserTeams()

它仍然没有给我带来“它工作了！”的新对象。作为应用程序中的有效负载。我尽力遵循示例和文档。不确定我是否错过了什么？

Answer 1

您需要使用alias，它由react-chrome-redux库提供。

您现在遇到的问题是异步操作会返回一个函数，该函数无法通过消息传递协议发送到后台页面。相反，您将调度一个普通的对象操作，该操作在别名中定义为thunk。

The boilerplate repo that you linked有一个如何设置和使用别名的示例。

无法让Redux Thunk工作

1 个答案: