标签: redux

初始状态如下所示：

const INITIAL_STATE = {
    myArray: []
};

现在在我的减速器中，我想将一个新对象附加到现有数组中。我想出了这样的东西，但它没有按预期工作。

    case ADD_TO_ARRAY:
        return {
            ...state,
            myArray: [...state[ { action.payload.key: action.payload.value} ]]
        };

注意：我想使用在操作有效负载中传递的键和值来创建一个新对象。

我有一个播放列表，我试图将 keyDown 绑定到……问题是我无法使用典型的 React.Component，因为我正在使用库（https://github.com/clauderic/react-sortable-hoc ) 这需要我使用功能性无状态组件 (SortableContainer)。所以我什至无法访问道具或状态。我试图将数据作为参数传递，但没有任何效果。

这有效，但我需要以某种方式将数据传递给 handleKeyDown .. 特别是我真的想以某种方式将“道具”传递给 handleKeyDown

function handleKeyDown(e) {
  // **** I need some way to access outside data in here some how..
  //      whether it's passed as a parameter or any other way
  console.log(e.keyCode);
}

const PlaylistPages = SortableContainer(( props ) => {
  return (
    <div className="playlist-sortable" onKeyDown={handleKeyDown} tabIndex="0">
    // etc
  );
}

我是 redux 的新手，请问这是在以下代码中执行 redux 的正确方法吗？当调用 action 来执行 currentTime 时，这是一个 reducer 方法。

import { combineReducers } from 'redux';
import { UPDATE_TIME } from './actions';
import { Map } from 'immutable';

 const initialState = Map({update:false, currentTime: ""});

 function currentTime(state = initialState, action) {
  switch (action.type) {
    case UPDATE_TIME:
      return {...state, update: true, currentTime: action.time };
    default:
      return state;
  }
} 

const currentTimeReducer = combineReducers({
    currentTime
});

export default currentTimeReducer

我有许多动作创建者，如果从服务器返回的响应是401我想注销用户（需要访问历史对象的共享功能）。我需要在动作创建者中访问历史对象。我该怎么做？

这是动作创建者：

export function fetchGroups() {
  return (dispatch) => {
    axios.get(GROUP_ENDPOINT, AUTHORIZATION_HEADER)
      .then(response => {
          dispatch(groupsFetchSucceeded(response.data));
      })
      .catch(({response}) => {
        if (response.status ===  401) { // Unauthorized
          //logout user &
          //this.props.history.push('/login'); HERE I NEED ACCESS TO HISTORY
        } else {
          dispatch(groupsFetchErrored({
            error: response.data.message
          }));
        }
      })
  };
}

这是我的app.js代码：

ReactDOM.render(
  <Provider store={store}>
      <BrowserRouter>
        <div>
          <Switch>
            <Route exact path="/login" render={props =>
                isAuthenticated() ? <Redirect to='/' /> :
                <LoginForm {...props}/>
            } />
            <Route exact path="/register" render={props =>
                isAuthenticated() …

我对 React 和 Redux-Form 还很陌生，目前我需要一些帮助。

基本上我有列表页面和他们的编辑按钮。单击编辑时，我会显示一个带有字段的模式弹出窗口，并执行 API 调用以获取相应的列表数据。

您能否让我知道如何使用从 API 调用接收到的数据预先填充模态弹出窗口中的字段？

非常感谢带有代码示例的演示（就像我说我对 React & Redux & Redux-form 很陌生）。:(

提前致谢！

我有一个具有以下状态的 Redux 减速器：

const INITIAL_STATE = {
  permissions: [''],
  authzError: null
};

我已经有一些修改 state.permissions 的 Redux 操作。我正在编写以下操作来运行权限检查：

export function isAuthz(allowed, except) {
  // I need state.permissions here
  ...
}

我知道我可以这样做：

export function isAuthz(allowed, except, permissions) {
  // Now do permission check
  ...
}

但这意味着将 state.permissions 拉出组件中，然后将其放入 isAuthz 操作中，这似乎是一种浪费且容易出错。我可以只检查减速器中的权限，但我认为一个动作是我应该这样做的地方。

我应该在哪里进行此权限检查以及如何获取 state.permissions ？

谢谢，

沃伦

我读过有关 bindActionCreators 的文章，我在这里编译了一份简历：

    import { addTodo,deleteTodo } from './actionCreators'
    import { bindActionCreators } from 'redux'

    function mapStateToProps(state) {
      return { todos: state.todos }
    }

    function mapDispatchToProps(dispatch) {
      return bindActionCreators({ addTodo, deleteTodo }, dispatch) 
    }

    *short way
        const mapDispatchToProps = {
          addTodo,
          deleteTodo
        }   
    export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)

另一个代码使用如下：

        function mapDispatchToProps(dispatch) {
          let actions = bindActionCreators({ getApplications });
          return { ...actions, dispatch };
        }           

为什么以前带有 bindActionCreators 的代码不需要 disptach 参数？

我已经尝试过这种方式来获得 this.props 的调度（但不起作用）：

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators ({ …

我是 React/Redux 绑定的新手，我将实现 Redux 组件，该组件具有刷新笑话的形式，并可能改变获取的笑话数量（默认为 1 个笑话）：

      import fetchJokes from '../actions/jokes';
      import { connect } from 'react-redux';

      class FormToRefresh extends React.Component {
        constructor(props) {
          super(props);
          this.state = {value: 1};
          this.handleInput = this.handleInput.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
        }

        handleInput(e) {
          let input = e.target.value;
          if(isNaN(input)||input > 10||input< 1) {
            alert("Wrong input");
            this.setState({value: 1}); 
          } else {
            this.setState({value: input})     
          }

          handleSubmit(e) {
            // this should trigger dispatching fetchJokes action
            // but how to integrate dispatch() function here...                

            dispatch(fetchJokes(this.state.value));

          }

          render() {
            return ( …

在我的 Reducer 中，我试图更新字典集合中保存的数组中对象的属性，但它不起作用，我不知道为什么。我的状态的 results 属性是一个键/值对的字典，值是一个数组。

我尝试使用 map 函数创建一个新数组，但我的结果和状态没有更新。这是我的代码：

 case LOAD_SUCCESS: {
      const form = (action as LoadSuccessAction).form;

      return {
         results: {
           ...state.results,
           ...state.results['FORMS'].map(item => 
             item.id === form .id
              ? {...item, 'categories': form.categories}
              : item)           
         },    
        loading: false,
        loaded: true
      };
    } 

我究竟做错了什么？

我使用 redux 的假设是调度操作是一个同步任务。

fire action 1 - > store updated
fire action 2 -> store updated

在我目前正在进行的一个项目中，我有一个产品定制器，允许一些用户选择，他们可以下多个订单，但如果他们只订购当前选择并选择“购买”，我会触发“addOrder”，将他们的选择添加到 orders 数组，然后是“purchase”操作，这是一个将存储在 redux 中的订单提交到我的购物车 API 的 thunk。

我预计我将能够在每次操作后可靠地依赖商店处于一致状态，因此当第二个操作触发时，它将具有状态，就像它之前的第一个常规操作触发后一样，但没有骰子。

• 我对 redux 的期望和理解不正确吗？
• 如果是这样，redux thunk 是否以某种方式在正常调度之外起作用？

在我的连接组件中，我调度每个动作：

//.... inside component
purchase = () => {
  this.props.addOrder(); // regular action
  this.props.purchase(); // thunk
};
// ... rest of component