Question

我通常作为Java程序员工作，我喜欢这样一个事实：使用Java很多代码设计都是标准化的。例如，您阅读了关于Spring或Hibernate的Java示例，代码在整个世界中看起来结构相同。

我现在正在使用redux处理ReactJS，我似乎无法理解它。我看到的每个例子都做了一切完全不同的事情，并且接缝似乎整个JavaScript社区都无法理解如何做同样的事情，所以我希望有人可以解释ReactJS / redux是如何工作的。< / p>

我有一个登录页面，当我点击一个按钮时，必须对oauth2 auth服务器执行http帖子，并且成功时必须重定向。

我的组件有效。它是LoginPage，我可以确认，当我点击登录按钮时，会调用一个动作。

class LoginPage extends React.Component {
  render() {
    return (
      <div id="login-container">
        <LoginForm {...this.props} />
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleSubmit: (evt) => {
      evt.preventDefault();

      performLogin(dispatch, evt.target.username.value, evt.target.password.value );
    }
  }
}

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

performLogin方法是一个动作，我的actions.js看起来像这样：

export function performLogin( dispatch, username, password ) {
    login(username, password).then(function (response) {
        dispatch({
            type: LOGIN_SUCCESS
        });
    })
    .catch(function (error) {
        dispatch({
            type: LOGIN_FAILURE
        });
    });
}

reducer看起来像这样：

const loginReducer = (state = initialState, action) => {
    switch (action.type) {
        case LOGIN_SUCCESS:
            return [
                ...state, {
                    auth: {
                        'login': true
                    }
                }
            ]
        case LOGIN_FAILURE:
            return [
                ...state, {
                    auth: {
                        'login': false
                    }
                }
            ]
        default:
            return state;
    }
};

我已经尝试在动作中做一个axios帖子，但我得到的错误就像动作需要是一个普通的对象或类似的东西。

我的问题是你在ReactJS / redux中执行ajax调用和重定向的位置是什么？在动作或减速器中？

这是我的packages.json：

的一部分

"react": "^15.1.0",
"react-addons-test-utils": "^15.1.0",
"react-dom": "^15.1.0",
"react-redux": "^5.0.4",
"react-router": "^3.0.2",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.5.2",
"redux-form": "^6.8.0",
"redux-logger": "^2.6.1",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",

Answer 1

在成功承诺后，只需使用browserHistory.push("page-url");方法更改路线

Answer 2

对于错误＆＃34;动作需要是一个普通的对象或类似的东西＆＃34;我相信您的Redux-thunk设置不正确。 dispatch(performLogin(username, password))

export function performLogin( username, password ) { return function (dispatch) { return login(username, password) .then(function (response) { dispatch({ type: LOGIN_SUCCESS }); }) } }

参见示例makeASandwichWithSecretSauce https://github.com/gaearon/redux-thunk

成功发布后React redux重定向

2 个答案: