Redux应用程序中的初始状态可以通过两种方式设置:

• 将它作为第二个参数传递给createStore(docs link)
• 将它作为第一个参数传递给(子)减速器(docs link)

如果您将初始状态传递到商店,那么如何从商店中读取该状态并将其作为减速器中的第一个参数？

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

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

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

什么是可选[ownprops]参数？

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

我意识到这是一个基本问题,但我没有在其他地方找到答案.

是store.dispatch同步还是异步Redux？

如果它是异步的,有可能在动作传播之后添加回调,因为它可以用React？

我有一个我创建的组件:

class Create extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    var playlistDOM = this.renderPlaylists(this.props.playlists);
    return (
      <div>
        {playlistDOM}
      </div>
    )
  }

  activatePlaylist(playlistId) {
    debugger;
  }

  renderPlaylists(playlists) {
    return playlists.map(playlist => {
      return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div>
    });
  }
}

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

export default connect(mapStateToProps)(Create);

当我render这个页面时,我的activatePlaylist每一个都被称为.如果我喜欢:playlistmapbind activatePlaylist

activatePlaylist.bind(this, playlist.playlist_id)

我也可以使用匿名函数:

onClick={() => this.activatePlaylist(playlist.playlist_id)}

然后它按预期工作.为什么会这样？

说我有一个简单的切换:

单击按钮时,"颜色"组件在红色和蓝色之间变化

通过做这样的事情,我可能会达到这个结果.

index.js

Button: onClick={()=>{dispatch(changeColor())}}
Color: this.props.color ? blue : red

container.js

connect(mapStateToProps)(indexPage)

action_creator.js

function changeColor(){
 return {type: 'CHANGE_COLOR'}
}

reducer.js

switch(){
case 'CHANGE_COLOR':
return {color: true}

但这是一个很多代码的地狱,我可以用jQuery,一些类和一些css在5秒内完成一些代码.

所以我想我真正想问的是,我在这里做错了什么？

据我所知并纠正我,如果我错了,redux-thunk是一个中间件,它可以帮助我们在动作本身中调度异步函数和调试值,而当我使用redux-promise时,我无法创建异步函数而不实现自己的机制为Action抛出仅调度普通对象的异常.

这两个包之间的主要区别是什么？在单页反应应用中使用这两个包还是坚持使用redux-thunk有什么好处就足够了？

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

我正在尝试为我的Redux项目创建一个深度复制映射方法,该方法将使用对象而不是数组.我读到在Redux中,每个州都不应该改变以前的状态.

export const mapCopy = (object, callback) => {
    return Object.keys(object).reduce(function (output, key) {

    output[key] = callback.call(this, {...object[key]});

    return output;
    }, {});
}

有用:

    return mapCopy(state, e => {

            if (e.id === action.id) {
                 e.title = 'new item';
            }

            return e;
        })

但是它没有深层复制内部项目所以我需要调整它:

export const mapCopy = (object, callback) => {
    return Object.keys(object).reduce(function (output, key) {

    let newObject = {...object[key]};
    newObject.style = {...newObject.style};
    newObject.data = {...newObject.data};

    output[key] = callback.call(this, newObject);

    return output;
    }, {});
}

这不太优雅,因为它需要知道传递了哪些对象.ES6中是否有一种方法可以使用扩展语法来深度复制对象？

这是Redux官方文档的一部分:

它被称为reducer,因为它是你传递给它的函数类型 Array.prototype.reduce(reducer, ?initialValue)

这对我来说没什么意义.有人可以向我解释为什么他们实际上被称为减速器？它们返回默认值(或者它们具有默认参数值)的事实并不会使它们成为减速器恕我直言.

所以我在一周前开始学习React,我不可避免地遇到了状态问题以及组件应该如何与应用程序的其余部分进行通信.我四处搜索,Redux似乎是这个月的味道.我阅读了所有文档,我认为这实际上是一个非常具有革命性的想法.以下是我的想法:

国家通常被认为是非常邪恶的,并且是编程中的大量漏洞.而不是在整个应用程序中散布它全部Redux说为什么不把它全部集中在一个全局状态树中,你必须发出改变的动作？听起来不错.所有程序都需要状态,所以让我们把它放在一个不纯净的空间中,只在那里修改它,这样就很容易找到错误.然后我们也可以声明性地将各个状态片段绑定到React组件并让它们自动重绘,一切都很美.

但是,我对这整个设计有两个问题.首先,为什么状态树需要是不可变的？说我不关心时间旅行调试,热重新加载,并且已经在我的应用程序中实现了撤消/重做.必须这样做似乎很麻烦:

case COMPLETE_TODO:
  return [
    ...state.slice(0, action.index),
    Object.assign({}, state[action.index], {
      completed: true
    }),
    ...state.slice(action.index + 1)
  ];

而不是这个:

case COMPLETE_TODO:
  state[action.index].completed = true;

更不用说我正在制作一个在线白板只是为了学习,每个状态的变化可能就像在命令列表中添加画笔笔划一样简单.经过一段时间(数百次刷子)复制整个阵列可能会开始变得非常昂贵和耗时.

我没有使用独立于通过操作进行变异的UI的全局状态树,但它确实需要是不可变的吗？像这样的简单实现有什么问题(非常粗略的草案.在1分钟内写完)？

var store = { items: [] };

export function getState() {
  return store;
}

export function addTodo(text) {
  store.items.push({ "text": text, "completed", false});
}

export function completeTodo(index) {
  store.items[index].completed = true;
}

它仍然是一个通过发出的动作而变异的全局状态树,但非常简单和有效.