标签: react-redux

我是 React 的新手。我创建了一个演示应用程序。我试图在单击按钮时隐藏消息。1）但该操作不会调用按钮单击。2）以及为什么控制台action在减速器内部时控制台显示如下。这在页面重新加载时显示。 查看页面

inside reducer
redux.js:30 Object {type: "@@redux/INIT"}
redux.js:31 Object {}
redux.js:29 inside reducer
redux.js:30 Object {type: "@@redux/PROBE_UNKNOWN_ACTION_j.r.h.g.s.q.b.y.b.9"}
redux.js:31 Object {}
redux.js:29 inside reducer
redux.js:30 Object {type: "@@redux/INIT"}
redux.js:31 Object {}

我的 package.json

{
  "name": "react-redux-data-flow",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.5",
    "redux": "^3.7.0",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

应用程序.js …

我有一个播放列表，我试图将 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
  );
}

这是 LoginScreenContainer.js

import React from 'react'
import { connect } from 'react-redux'
import LoginScreen from '../components/LoginScreen.js'
import * as AUTH_ACTIONS from '../actions/auth.js'

const mapStateToProps = state => ({
    loggedIn: state.AUTH.loggedIn
})

const mapDispatchToProps = (dispatch) => {
    loginDefault: (username , password) => {
        dispatch(AUTH_ACTIONS.actions.loginDefault(username, password))
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)

这是动作/auth.js

import types from '../utilities/types.js'

export const actions = {
    loginDefault: (username, password) => ({
        type: types.LOGIN_DEFAULT,
        meta: {
            type: 'api',
            path: '/users/token',
            method: 'POST'
        },
        payload: {username, password} …

当我为材质 ui RaisedButton 上的 onClick 事件调用动作创建者时，出现以下错误

失败的道具类型：无效的支柱onClick型的object供给RaisedButton，预计function。

这是我写的组件

import React, { Component } from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import { connect } from 'react-redux';

import * as actions from '../actions';

class App extends Component {
  authButton = () => {
    if(this.props.authenticated) {
      return <RaisedButton label="Sign out" onClick={this.props.authenticate(false)} />
    }

    return <RaisedButton label="Sign out" onClick={this.props.authenticate(true)} />
  }
  render() {
    return (
        <div>{this.authButton()}</div>
    );
  }
}

const mapStateToProps = (state) => {
  return …

我有许多动作创建者，如果从服务器返回的响应是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() …

我有一个具有以下状态的 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 ( …

我使用 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

我应该怎么做才能停止在 map() 中渲染数组中的所有项目并限制为所需的数量（假设为 4）？