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
      })
    }
  }
}

我有一个在React Native Navigator组件中创建的react-redux容器组件.我希望能够将导航器作为道具传递给此容器组件,以便在按钮按下其表示组件后,它可以将对象推送到导航器堆栈.

我想这样做而不需要手工编写react-redux容器组件给我的所有样板代码(并且也不会错过所有反应 - redux也会在这里给我的优化).

示例容器组件代码:

const mapStateToProps = (state) => {
    return {
        prop1: state.prop1,
        prop2: state.prop2
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onSearchPressed: (e) => {
            dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator
        }
    }
}

const SearchViewContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(SearchView)

export default SearchViewContainer

我希望能够在我的导航器renderScene功能中调用这样的组件:

<SearchViewContainer navigator={navigator}/>

在上面的容器代码中,我需要能够从mapDispatchToProps函数中访问这个传递的prop .

我不想将导航器存储在redux状态对象上,也不希望将支撑向下传递给表示组件.

有没有办法可以将支柱传递给这个容器组件？或者,有什么替代方法我可以忽略吗？

谢谢.

我使用create-react-appcli 创建了一个新的反应应用程序.然后我使用添加了'react-redux'库npm install --save react-redux.

在package.json我有:

"react-redux": "^4.4.5"

不幸的是,该应用程序无法编译,它抱怨:

Error in ./~/react-redux/lib/utils/wrapActionCreators.js
Module not found: 'redux' in C:\Users\Salman\Desktop\Courses\Internship\React\Youtube-Front-End\node_modules\react-redux\lib\utils

 @ ./~/react-redux/lib/utils/wrapActionCreators.js 6:13-29

我不知道这是什么意思？

这是完整的容器:

import React,{Component} from 'react';
import {connect} from 'react-redux';

class BookList extends Component{
  renderList(){
        return this.props.books.map((book)=>{
          <li key={book.title} >{book.title}</li>
        });
    }

  render(){

    return(
      <div>
        <ul>
          {this.renderList()}
        </ul>
      </div>
    );
  }
}

function mapStateToProps(state){
  return{
    books:state.books
  };
}

export default connect(mapStateToProps)(BookList);

这是完整的package.json:

{
  "name": "Youtube-Front-End",
  "version": "0.1.0",
  "private": true, …

我正在分解Redux的todo示例以试图理解它.我读过,mapDispatchToProps允许你将调度动作映射为道具,所以我想重写addTodo.js使用mapDispatchToProps而不是调用dispatch(addTodo()).我打电话给它addingTodo().像这样的东西:

import React from 'react';
import {connect} from 'react-redux';
import addTodo from '../actions';

let AddTodo = ({addingTodo}) => {
  let input;
  return (
      <div>
        <form onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          addingTodo(input.value)
          input.value = ""
        }}>
          <input ref={node => {
            input = node
          }} />
          <button type="submit">Submit</button>
        </form>
      </div>
  )
}

const mapDispatchToProps = {
  addingTodo: addTodo
}

AddTodo = connect(
  mapDispatchToProps
)(AddTodo)

export default AddTodo

但是,当我运行应用程序时,我收到此错误:Error: Invalid value of …

我正在构建一个 Next.js 应用程序，它目前正在使用 Redux。在我构建它时，我想知道是否真的有必要使用 Redux，它的使用是否实际上是一种反模式。这是我的推理：

为了在 Next.js 中正确初始化 Redux Store，您必须App使用getInitialProps方法创建自定义组件。通过这样做，您将禁用Next.js 提供的自动静态优化。

相比之下，如果我要在客户端包含 Redux，则只有在 App 挂载后，Redux 商店才会在每次服务器端导航后重置。例如，我有一个 Next.js 应用程序，它在客户端初始化 Redux 存储，但是当路由到动态路由（例如 ）时pages/projects/[id]，页面是服务器端呈现的，我必须重新获取店铺。

我的问题是：

1. 在这种情况下，Redux 商店有什么好处？
2. 我应该在根App组件中初始化商店并放弃自动静态优化吗？
3. 有没有更好的方法来管理 Next.js 9.3 中的状态getStaticProps和其他数据获取方法
4. 我错过了什么吗？

我只是制作一个简单的应用程序来学习与redux的异步.我已经完成了所有工作,现在我只想在网页上显示实际状态.现在,我如何在render方法中实际访问商店的状态？

这是我的代码(一切都在一页,因为我只是在学习):

const initialState = {
        fetching: false,
        fetched: false,
        items: [],
        error: null
    }

const reducer = (state=initialState, action) => {
    switch (action.type) {
        case "REQUEST_PENDING": {
            return {...state, fetching: true};
        }
        case "REQUEST_FULFILLED": {
            return {
                ...state,
                fetching: false,
                fetched: true,
                items: action.payload
            }
        }
        case "REQUEST_REJECTED": {
            return {...state, fetching: false, error: action.payload}   
        }
        default: 
            return state;
    }
};

const middleware = applyMiddleware(promise(), thunk, logger());
const store = createStore(reducer, middleware);

store.dispatch({
    type: "REQUEST",
    payload: fetch('http://localhost:8000/list').then((res)=>res.json())
});

store.dispatch({ …

我可能遗漏了一些非常明显的东西,想要清除自己.

这是我的理解.
在一个天真的反应组件中,我们有states&props.state通过setState重新渲染更新整个组件.props大部分是只读的,更新它们没有意义.

在通过类似的方式订阅redux商店的react组件中store.subscribe(render),它显然会在每次更新商店时重新呈现.

react-redux有一个帮助器connect(),它注入部分状态树(组件感兴趣)和actionCreators props关于组件,通常通过类似的方式

const TodoListComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

但是要理解a setState对于对TodoListComponentredux状态树更改(重新渲染)做出反应是必不可少的,我在组件文件中找不到任何state或setState相关的代码TodoList.它读起来像这样:

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

有人能指出我正确的方向,我错过了什么？

PS我正在关注与redux包捆绑在一起的todo list示例(https://github.com/reactjs/redux/tree/master/examples/todos/src/containers).

我刚刚将我的全功能react-native应用程序升级到redux v4,但现在我收到以下错误:

错误:错误:错误:错误:在reducer执行时,您可能无法调用store.getState().减速器已经作为一个论点得到了国家.将它从顶部减速器传下来,而不是从商店中读取.

我怀疑问题是我在其他组件中有很多组件,每个组件都有自己的组件connect(mapStateToProps, mapDispatchToProps)(Component),我认为这不是实现它的正确方法,尽管我不确定正确的方法.

任何方向都非常感谢!

堆栈跟踪:

    This error is located at:
    in Connect(SideBarApp) (at SceneView.js:9)
    in SceneView (at createTabNavigator.js:10)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in ResourceSavingScene (at createBottomTabNavigator.js:86)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in TabNavigationView (at createTabNavigator.js:127)
    in NavigationView (at createNavigator.js:59)
    in Navigator (at createNavigationContainer.js:376)
    in NavigationContainer (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:59)
    in Navigator (at createNavigationContainer.js:376)
    in NavigationContainer (at AppNavigator.js:36)
    in App (created by Connect(App))
    in …

我有一个带搜索面板的网页.搜索面板有几个输入字段:id,size,...

我想要的是当用户设置搜索值(例如:id = 123和size = 45)并按下搜索按钮时:

1. 应使用新搜索值(id = 123和size = 45)更新Redux reducer中的searchState
2. 网址应更改为" http:// mydomain/home？id = 123&size = 45 "

另一方面,如果用户将URL更改为http:// mydomain/home？id = 111&size = 22,则:

1. reducer中的searchState应该用新的搜索值更改(id = 111和size = 22)
2. UI搜索面板输入应使用新值更新(id = 111和size = 22)

如何达成目标？我应该使用什么路由器(react-router,redux-router,react-router-redux ot other)？

我正在尝试将表示组件与容器组件分开.我有一个SitesTable和一个SitesTableContainer.容器负责触发redux操作以基于当前用户获取适当的站点.问题是在最初呈现容器组件之后,异步获取当前用户.这意味着容器组件不知道它需要在其componentDidMount函数中重新执行代码,这将更新要发送给的数据SitesTable.我想我需要在其中一个props(用户)更改时重新呈现容器组件.我该怎么做？

class SitesTableContainer extends React.Component {
    static get propTypes() {
      return {
        sites: React.PropTypes.object,
        user: React.PropTypes.object,
        isManager: React.PropTypes.boolean
      }
     }

    componentDidMount() {
      if (this.props.isManager) {
        this.props.dispatch(actions.fetchAllSites())
      } else {
        const currentUserId = this.props.user.get('id')
        this.props.dispatch(actions.fetchUsersSites(currentUserId))
      }  
    }

    render() {
      return <SitesTable sites={this.props.sites}/>
    }
}

function mapStateToProps(state) {
  const user = userUtils.getCurrentUser(state)

  return {
    sites: state.get('sites'),
    user,
    isManager: userUtils.isManager(user)
  }
}

export default connect(mapStateToProps)(SitesTableContainer);