redux 教程:const 存储在 this.props 中 [英] redux tutorial: const store in this.props

问题描述

我正在做教程反应，视频 #24

https://egghead.io/课程/javascript-redux-passing-the-store-down-explicitly-via-props

组件图:

TodoApp -> VisibleTodoList -> FilterLink

我只需要知道为什么 VisibleTodoList 和 FilterLink 组件中的这段代码:const { store } = this.props"，就是获取 this.props 中的第一个元素?在底部查看 this.props 的控制台日志并为每个组件存储对象.

class VisibleTodoList 扩展组件 {componentDidMount() {const { store } = this.props;this.unsubscribe = store.subscribe(() =>this.forceUpdate());}componentWillUnmount() {this.unsubscribe();}使成为() {const props = this.props;const { store } = props;const state = store.getState();返回 (<待办事项列表待办事项={getVisibleTodos(state.todos，state.visibilityFilter)}onTodoClick={id =>store.dispatch({类型:'TOGGLE_TODO'，ID})}/>);}}类 FilterLink 扩展组件 {componentDidMount() {const { store } = this.props;this.unsubscribe = store.subscribe(() =>this.forceUpdate());}..//组件的其余部分和之前一样到 `render()`.使成为() {const props = this.props;const { 商店 } = 道具const state = store.getState()..//组件的其余部分和以前一样.}}const TodoApp = ({ store }) =>(<div><AddTodo store={store}/><VisibleTodoList store={store}/><页脚商店={商店}/>

);const render = () =>{ReactDOM.render(<TodoApp store={createStore(todoApp)}/>,document.getElementById('root'));};store.subscribe(render);

过滤链接

当我在控制台上为 VisibleTodoList 组件打印 this.props 时，我有两个元素:store 和 proto，这很清楚.

Object {store: Object}商店:对象派遣 :dispatch(action) getState: getState()replaceReducer : replaceReducer(nextReducer)订阅:订阅(听众)符号(可观察):可观察()__proto__ : 对象__proto__ : 对象

但是当我在控制台上为 FilterLink 组件打印 this.props 时，我有:(我不明白这个顺序，存储对象它是第一个元素?)

Object {filter: "SHOW_ALL", store: Object, children: "All"}孩子们:全部"过滤器:SHOW_ALL"商店:对象__proto__ : 对象

当我在控制台存储"上为 FilterLink 组件打印时，我得到:

对象 {}调度:调度(动作)获取状态:获取状态()replaceReducer : replaceReducer(nextReducer)订阅:订阅(听众)符号(可观察):可观察()__proto__ :目的

我需要了解更多关于const { store } = this.props"的信息，我不清楚.

解决方案

const { store } = this.props 正在使用 ES6 对象解构.

为右侧的对象分配一个常量 like 提取与变量同名的键的值(在本例中为 store 并将其分配给 store 变量.它是相当于

const store = this.props.store

I'm doing the tutorial react, video #24

https://egghead.io/lessons/javascript-redux-passing-the-store-down-explicitly-via-props

Map of components:

TodoApp -> VisibleTodoList -> FilterLink

I just need to know why this code in VisibleTodoList and FilterLink component : "const { store } = this.props", it's this getting the first element in this.props? to see at the bottom my console log for this.props and store object for every of these components.

class VisibleTodoList extends Component {
  componentDidMount() {
    const { store } = this.props;
    this.unsubscribe = store.subscribe(() =>
      this.forceUpdate()
    );
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    const props = this.props;
    const { store } = props;

    const state = store.getState();

    return (
      <TodoList
        todos={
          getVisibleTodos(
            state.todos,
            state.visibilityFilter
          )
        }
        onTodoClick={id =>
          store.dispatch({
            type: 'TOGGLE_TODO',
            id
          })
        }
      />
    );
  }
}

class FilterLink extends Component {
  componentDidMount() {
    const { store } = this.props;
    this.unsubscribe = store.subscribe(() =>
      this.forceUpdate()
    );
  }
  .
  . // Rest of component as before down to `render()`
  .
  render() {
    const props = this.props;
    const { store } = props
    const state = store.getState()
    .
    . // Rest of component as before
    .
  }
}

const TodoApp = ({ store }) => (
  <div>
    <AddTodo store={store} />
    <VisibleTodoList store={store} />
    <Footer store={store} />
  </div>
);

const render = () => {

  ReactDOM.render(
    <TodoApp store={createStore(todoApp)} />,
    document.getElementById('root')
  );
};

store.subscribe(render);

FilterLink

When I print this.props for VisibleTodoList Component on the console i have two elements: store and proto , this is clear.

Object {store: Object}
store : Object
    dispatch :
    dispatch(action) getState: getState()
    replaceReducer : replaceReducer(nextReducer)
    subscribe : subscribe(listener)
    Symbol(observable) : observable()
    __proto__ : Object
__proto__ : Object

but when I print this.props for FilterLink Component on the console i have: (I dont understand this order, store objet it's the first element ?)

Object {filter: "SHOW_ALL", store: Object, children: "All"}
    children :    "All"
    filter :  "SHOW_ALL"
store : Object
__proto__   : Object 

When I print on the console 'store' for FilterLink Component, i get:

Object {}
dispatch    :    dispatch(action)
getState  :   getState()
replaceReducer   :     replaceReducer(nextReducer)
subscribe   :    subscribe(listener)
Symbol(observable)   : observable()
__proto__   :
Object

I need to know more about "const { store } = this.props", it's not clear for me.

解决方案

const { store } = this.props is using ES6 object destructuring.

Assigning a constant like to the object on the right side pull out the value for the key that has the same name as the variable (in this case store and assigns it to the store variable. It's the equivalent of

const store = this.props.store

这篇关于redux 教程:const 存储在 this.props 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！