У меня есть один родительский компонент с именем App.js:
...
render() {
return (
<div>
{React.cloneElement(this.props.children, this.props}
</div>
)
}
...
function mapDispatchToProps(dispatch) {
return (
actions: bindActionCreators(actions,
)
}
export default connect(
...,
mapDispatchToProps
)(App)
И реквизит будет передаваться каждому компоненту. Я хотел бы, чтобы каждый компонент имел файл создателей своих действий, но как я могу связать всех создателей действий в один, чтобы создатели действия могли быть переданы с уровня App.js? Любые другие предложения будут также оценены, чтобы создавать создателей действий для каждого компонента.
Вот структура до сих пор:
ComponentOne
..actions.js //action creators
..ComponentOne.js
ComponentTwo
..actions.js //action creators
..ComponentTwo.js
App.js
actions.js//should I compile all the action creators here?
И каждый actions.js будет выполнен следующим образом:
let actions = {
logSayings() {
...
}
}
export default actions
Благодарим вас заблаговременно и ответим/принимаем ответ.
УСТАНОВКА REDUX
store.js
import { applyMiddleware, compose, createStore } from 'redux'
import rootReducer from './reducers/rootReducer'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
let finalCreateStore = compose(
applyMiddleware(thunk, logger())
)(createStore)
export default function configureStore(initialState = {articles: []}) {
return finalCreateStore(rootReducer, initialState)
}
actions.js
import { hashHistory } from 'react-router'
import { browserHistory } from 'react-router';
let actions = {
updateBar(status) {
return {
type: 'UPDATE_BAR',
indicator: status
}
}
}
export default actions
homeReducer.js
const homeReducer = function(articles = [], action){
switch(action.type){
case 'UPDATE_BAR':
return {
indicator: action.indicator,
}
default:
return articles
}
}
export default homeReducer
index.js
import React from 'react';
import {render} from 'react-dom';
import configureStore from '../../redux/store'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import App from './components/App'
import Home from './components/Home/Home'
let initialState = {
}
let store = configureStore(initialState)
render(
<div>
<Provider store={store}>
<Router history={hashHistory}>
<Route
component={App}
path='/'
>
<IndexRoute component={Home}/>
</Route>
</Router>
</Provider>
</div>,
document.querySelector('.wrapper')
)