編集: 要約 - 私の質問の最初の原因は実際にはタイプミスでした: 大文字の「G」が原因で機能しませんでした。
ただし、親切な回答者は、タイプミスだけでなく、私が取っていたアプローチの間違った前提にも対処しました-あなたもプロバイダーを使用してストアを渡し、接続を使用している場合、彼らの回答はあなたに関連しています. これを反映するために質問のタイトルを更新しました。
私は素晴らしい 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)
「Uncaught TypeError: store.GetState is not a function」が表示されます
ストアはここから来ています：
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 コンポーネントは 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
};