编辑:摘要-我的问题的最初原因实际上是一个错字:由于大写的“G”而无法正常工作。
但是,善良的回答者不仅解决了错字,而且解决了我采用的方法中的错误前提 - 如果您也使用 Provider和使用 connect 传递商店,他们的答案与您相关。我已经更新了问题的标题以反映这一点。
我正在尝试按照令人敬畏的 redux 视频<Provider>
中的说明进行操作,但是因为使用react-redux传递商店而感到悲痛。
我有一个根组件:
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)
我得到“未捕获的类型错误:store.GetState 不是函数”
商店来自这里:
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)
(不是我的代码,一个支持 react native 和浏览器客户端的框架,我正在开始工作)
我错过了什么?
我从视频中复制了这个 - 请注意,AddTodo 组件没有使用 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
};