通过上下文传递商店，<provider>在基于connect（）的场景中不起作用

时间：2016-03-11 12:33:19

标签： javascript reactjs redux react-redux

编辑：摘要 - 我的问题的最初原因实际上是一个错字：它由于资本而没有工作＆＃39; G＆＃39;

然而，那些回答者不仅解决了错字，而且解决了我采取的方法中的错误前提 - 如果您使用提供商和使用连接传递商店，他们的答案与您相关。我更新了问题的标题以反映这一点。

我正在尝试按照awesome redux videos中的说明进行操作，但是使用来自react-redux的<Provider>传递商店已经感到悲痛。

我有一个根组件：

export default class Root extends Component {
   render() {

      const { store } = this.props

      return (
         <Provider store={store}>
            <div>
               <ReduxRouter />
               <DevTools />
            </div>
         </Provider>
      )
   }
}

尝试使用商店的演示组件：

const ProjectsSummary = (props, {store}) => {
   const state = store.GetState();
   const { projects } = state;

   return (
      <div className="home-projects col-md-10">
          <h3>Projects</h3>
          <ul>
              { projects.map(p => <li key={p.id}>{p.contract.client}</li>) }
          </ul>
      </div>
   )
}

ProjectsSummary.contextTypes = {
   store: React.PropTypes.object
};

class Home extends BasePage {

   render() {
      return (
         <div className="home-page container-fluid">
             {super.render()}
             <HomeLeftBar/>
             <HomePageHeader/>
             <ProjectsSummary/>
         </div>
      )
   }
    }

export default connect()(Home)

我得到＆＃34; Uncaught TypeError：store.GetState不是函数＆＃34;

商店来自这里：

import configureStore from './store/configureStore'

const store = configureStore({
   security:{
      jwt: 'mock'  // Mock data supplied below: only loaded when this is set.
   }, 
   projects: [
      {
            // elided for brevity
      }
   ]
})

/**
 * Main application render method that attaches it
 * to the HTML page.
 */
render(
   <Root store={store}/>,
   document.getElementById('app')
)

并在此处创建：

export default (initialState) => {
   const store = createDevStore(initialState)

   if (module.hot) {
      // Enable Webpack hot module replacement for reducers
      module.hot.accept(['../../common/reducers', '../reducers'], () => {
         const nextRootReducer = require('../../common/reducers')
         const nextBrowserReducers = require('../reducers')
         store.replaceReducer(nextRootReducer(nextBrowserReducers))
      })
   }

   return store
}

function createDevStore(initialState){
   if(initialState && initialState.security && initialState.security.jwt === 'mock')
      return mockCreateStore(rootReducer(browserReducers), initialState)
   else
      return finalCreateStore(rootReducer(browserReducers))
}

const mockCreateStore = compose(
   reduxReactRouter({routes, createHistory}),
   applyMiddleware(createLogger()),
   DevTools.instrument()
    )(createStore)

（不是我的代码，支持反应本机和浏览器客户端的框架，我正在开始工作）

我错过了什么？

我正在从视频中复制它 - 注意AddTodo组件不是＆＃34;包装＆＃34;使用connect（）：

const AddTodo = (props, { store }) => {
  let input;

  return (
    <div>
      <input ref={node => {
        input = node;
      }} />
      <button onClick={() => {
        store.dispatch({
          type: 'ADD_TODO',
          id: nextTodoId++,
          text: input.value
        })
        input.value = '';
      }}>
        Add Todo
      </button>
    </div>
  );
};
AddTodo.contextTypes = {
  store: React.PropTypes.object
};

2 个答案:

答案 0 :(得分：14)

This answer是正确的，但我想澄清一些事情。

你似乎对表现和容器组件以及connect()的作用有很多困惑。我建议您再次观看相关视频，并确保在最后观看它们。

  1. 的确，store.GetState()不是一种有效的方法; store.getState()是。
  2. 如果您手动使用store.getState() ，则必须在某处使用store.subscribe()，以便始终获得最新状态。您从视频中粘贴的示例AddTodo组件本身无法正常工作 - 仅在视频中有效，因为我们在顶部有store.subscribe(render) 。
  3. 课程后面的视频讨论了如何从顶部重新渲染变得麻烦，此时我们介绍了容器组件。后来我们证明使用connect()生成容器组件比用手写它们更容易 - 在这种情况下，connect()负责订阅商店。
  4. 仅在Home中将connect()包裹在您的案例中无效。 connect()生成一个订阅商店的容器组件，但如果您未指定mapStateToProps参数，它甚至不会订阅商店。 使用connect()是手动使用store.getState()，store.subscribe()和contextTypes的有效替代方式。它永远无法理解 >对某些内容使用connect()并致电store.getState()或指定contextTypes。

    5. 所以，再说一遍：

    • store.getState()和store.subscribe()是低级API。如果你决定使用它们，你必须一起使用它们;一个没有另一个没有意义。

    • connect()负责调用getState()和subscribe()，并通过道具将必要的信息传递给子组件。如果您使用connect()，则永远不需要store.getState()，store.subscribe()或contextTypes。 connect()的重点是将它们抽象出来。

    课程教你所有这些工具向你展示没有魔力。但通常您不应在真实应用中使用store.getState()和store.subscribe()。您应该几乎专门使用connect()，除非您有一个非常具体的原因来访问低级API。

    我会像这样重写你的代码：

    // ProjectSummary is a presentational component
// that takes projects as a prop and doesn't care
// where it comes from.
const ProjectsSummary = ({ projects }) => {
  return (
    <div className="home-projects col-md-10">
      <h3>Projects</h3>
      <ul>
        {projects.map(p => <li key={p.id}>{p.contract.client}</li>)}
      </ul>
    </div>
  )
}

// Home by itself is also a presentational component
// that takes projects as a prop. However we will
// wrap it in a container component below using connect().
// Note that I got rid of inheritance: it's an anti-pattern
// in React. Never inherit components; instead, use regular
// composition and pass data as props when necessary.
const Home = ({ projects }) => (
  <div className="home-page container-fluid">
    <BasePage />
    <HomeLeftBar />
    <HomePageHeader />
    <ProjectsSummary projects={projects} />
  </div>
)

// How to calculate props for <Home />
// based on the current state of the store?
const mapStateToProps = (state) => ({
  projects: state.projects
})

// Generate a container component
// that renders <Home /> with props from store.
export default connect(
  mapStateToProps
)(Home)

答案 1 :(得分：4)

更新

store.GetState()不是一种方法。

store.getState()是一种方法。

您对connect的使用有点落后。

connect将函数作为第一个参数，使您可以访问商店和道具。您传递给另一方的是视图组件将作为其props接收的对象。

const MyWidget = (props) => {
  const { title, data } = props;
  return (<div>{title}{data}</div>);
};
const MyWidgetContainer = connect((store, props) => {
  return { title: props.title, data: store.a.b.widget.data };
})(MyWidget);

如果我现在要导出它，并将其作为MyWidget导入到项目的其他位置（因为外部世界不知道窗口小部件和容器之间的区别），并给它一个标题，它应该工作。

import MyWidget from "./components/my-widget/";

//...
render ( ) {
   return (
     <MyWidget title="My Title" />
   );
}

MyWidget现在可以独立访问商店。

在您的情况下，您没有给connect您看到的变压器功能，您已将其应用于<Home>，这意味着如果您使用了Home HomeContainer可以访问商店您应用中的Home ...

100％正常，但除非您还包装演示文稿组件，否则您的演示组件将不具有商店访问权限。这也没关系，但这意味着// Home Home { render () { { a, b, c } = this.props; return ( <MyWidget a={ a } b={ b } c={ c } /> ); } } container = connect(/* ... */)(Home); 现在需要传递组件所需的道具。

{{1}}
相关问题
最新问题