我正在构建一个需要在某些情况下显示确认对话框的应用程序.

假设我想删除一些东西,然后我会调度一个动作,deleteSomething(id)因此一些reducer会捕获该事件并填充对话框减速器以显示它.

当这个对话提交时,我怀疑了.

• 该组件如何根据调度的第一个操作调度正确的操作？
• 动作创建者应该处理这个逻辑吗？
• 我们可以在减速机内添加动作吗？

编辑:

使它更清楚:

deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id)

createThingB(id) => Show dialog with Questions => createThingBRemotely(id)

所以我正在尝试重用对话框组件.显示/隐藏对话框不是问题,因为这可以在reducer中轻松完成.我想要指定的是如何根据左侧开始流动的动作从右侧调度动作.

我试图理解react-redux的连接方法,以及它作为参数所采用的函数.特别是mapStateToProps().

我理解它的方式,返回值mapStateToProps将是一个从状态派生的对象(因为它存在于商店中),其键将作为道具传递给目标组件(应用组件连接).

这意味着目标组件所使用的状态与存储在商店中的状态可能具有完全不同的结构.

问:这样可以吗？
问:这是预期的吗？
问:这是反模式吗？

@connect当我试图在反应组件中访问商店时,效果很好.但是我应该如何在其他一些代码中访问它.例如:假设我想使用授权令牌来创建可以在我的应用程序中全局使用的axios实例,那么最好的方法是什么？

这是我的 api.js

// tooling modules
import axios from 'axios'

// configuration
const api = axios.create()
api.defaults.baseURL = 'http://localhost:5001/api/v1'
api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here
api.defaults.headers.post['Content-Type'] = 'application/json'

export default api

现在我想从我的商店访问一个数据点,如果我试图在反应组件中使用它来获取它,那么这就是 @connect

// connect to store
@connect((store) => {
  return {
    auth: store.auth
  }
})
export default class App extends Component {
  componentWillMount() {
    // this is how I would get it in my react component
    console.log(this.props.auth.tokens.authorization_token) 
  }
  render() {...}
}

那里有任何见解或工作流程模式吗？

React 16.3.0已经发布,Context API不再是实验性功能.Dan Abramov(Redux的创建者)在这里写了一篇很好的评论,但是当Context仍然是一个实验性功能已经2年了.

我的问题是,在您的观点/经验中何时应该使用React Context而不是React Redux,反之亦然？

axios POST请求正在访问控制器上的url,但是将空值设置为我的POJO类,当我浏览chrome中的开发人员工具时,有效负载包含数据.我究竟做错了什么？

Axios POST请求:

var body = {
    userName: 'Fred',
    userEmail: 'Flintstone@gmail.com'
}

axios({
    method: 'post',
    url: '/addUser',
    data: body
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

浏览器响应:

如果我将标题设置为:

headers:{
  Content-Type:'multipart/form-data'
}

请求抛出错误

发布multipart/form-data时出错.Content-Type标头缺少边界

如果我在邮递员中提出相同的请求,它的工作正常并将值设置为我的POJO类.

任何人都可以解释如何设置边界或如何使用axios发送表单数据.

如何arr[]在reducer中的redux状态数组中添加元素？我这样做 -

import {ADD_ITEM} from '../Actions/UserActions'
const initialUserState = {
    arr:[]
}

export default function userState(state = initialUserState, action)
{
    console.log(arr);
    switch (action.type)
    {
        case ADD_ITEM: 
            return { 
                      ...state,
                      arr: state.arr.push([action.newItem])
                   }

        default:
            return state
    }
}

我是一个javascript/redux/react初学者用redux,react-redux和react做一个小应用程序.出于某种原因,当使用mapDispatchToProps函数与connect(react-redux binding)串联时,我收到一个TypeError,指示当我尝试执行生成的prop时,dispatch不是函数.当我将调度调用为prop时(参见提供的代码中的setAddr函数)它可以工作.

我很好奇为什么会这样,在redux文档中的示例TODO应用程序中,mapDispatchToProps方法的设置方式相同.当我在函数内部调试console.log(dispatch)时,它表示dispatch是type对象.我可以继续以这种方式使用调度,但在我继续使用redux之前,我会更好地了解为什么会发生这种情况.我正在使用带有babel-loaders的webpack进行编译.

我的代码:

import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import { setAddresses } from '../actions.js';
import GeoCode from './geoCode.js';
import FlatButton from 'material-ui/lib/flat-button';

const Start = React.createClass({
    propTypes: {
        onSubmit: PropTypes.func.isRequired
    },

    setAddr: function(){
        this.props.dispatch(
            setAddresses({
                pickup: this.refs.pickup.state.address,
                dropoff: this.refs.dropoff.state.address
            })
        )   

    },

    render: function() {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-6">
                        <GeoCode ref='pickup' />
                    </div>
                    <div className="col-xs-6">
                        <GeoCode ref='dropoff' />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-6">
                        <FlatButton 
                            label='Does Not …

如何在saga函数中访问redux状态？

我的问题

我有一个由以下部分组成的应用程序:

import { select } from 'redux-saga';
...
let data = yield select(stateSelectorFunction);

每个部分都是一个不同的组件,它有自己的减速器,传奇,动作和状态.

工具栏有一个保存按钮,可以调度"SAVE_PROJECT"动作类型.问题是我不希望工具栏知道项目(它有更多的职责,我只是希望它发送类型的动作).

我有一个项目相关的传奇,它听取了"SAVE_PROJECT":

import { select } from 'redux-saga';
...
let data = yield select(stateSelectorFunction);

我无法从传奇中的redux状态获得该项目.

我不认为我可以在当前项目reducer中听取"SAVE_PROJECT"事件,然后在reducer内部获取项目并向项目发送不同的操作.

我真的不希望我的工具栏知道整个状态树,并为每个动作发送与动作相关的任何内容.

我怎样才能将状态传递给传奇？还是只有国家的相关部分？

我看到传递给Redux函数的函数mapStateToProps和mapDispatchToProps函数作为第二个参数.connectownProps

[mapStateToProps(state, [ownProps]): stateProps] (Function):

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

什么是可选[ownprops]参数？

我正在寻找另一个例子来说明问题,因为Redux文档中已有一个例子

bindActionCreators的Redux文档声明:

唯一的用例bindActionCreators是当你想将一些动作创建者传递给一个不知道Redux的组件时,你不想将调度或Redux存储传递给它.

什么bindActionCreators是使用/需要的例子？

哪种组件不会意识到Redux？

两种选择的优点/缺点是什么？

//actionCreator
import * as actionCreators from './actionCreators'

function mapStateToProps(state) {
  return {
    posts: state.posts,
    comments: state.comments
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch)
}

VS

function mapStateToProps(state) {
  return {
    posts: state.posts,
    comments: state.comments
  }
}

function mapDispatchToProps(dispatch) {
  return {
    someCallback: (postId, index) => {
      dispatch({
        type: 'REMOVE_COMMENT',
        postId,
        index
      })
    }
  }
}