Подскажите как организовать архитектуру приложения, чтобы избежать перемешивания user и page сущностей:
Перемешивание констант page и user
https://github.com/SkunSHD/redux-twi...stants/Page.js
export const ADD_POST = 'ADD_POST'
export const ADD_COMMENT = 'ADD_COMMENT'
export const LOGIN_SUCCES = 'LOGIN_SUCCES'
дублирование в reducer'е:
https://github.com/SkunSHD/redux-twi...ducers/page.js
import {
ADD_POST,
ADD_COMMENT,
LOGIN_SUCCES
} from '../constants/Page'
const initialState = {
user: '',
text: ''
}
export default function page(state = initialState, action) {
switch (action.type) {
case LOGIN_SUCCES:
return { ...state, user: action.payload }
case ADD_POST:
return { ...state, user: state.user, text: action.payload }
case ADD_COMMENT:
return { ...state, user: action.payload.user, text: action.payload.text }
default:
return state;
}
}
https://github.com/SkunSHD/redux-twi...ducers/user.js
import {
LOGIN_SUCCES,
LOGIN_FAIL
} from '../constants/User'
const initialState = {
name: '',
error: ''
}
export default function user(state = initialState, action) {
switch(action.type) {
case LOGIN_SUCCES:
return { ...state, name: action.payload, error: '' }
case LOGIN_FAIL:
return { ...state, error: action.payload.message }
default:
return state
}
}
При таком container:
https://github.com/SkunSHD/redux-twi...tainers/App.js
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import Page from '../components/Page'
import User from '../components/User'
import * as userActions from '../actions/UserActions'
import * as pageActions from '../actions/PageActions'
class App extends Component {
render() {
const { user, text } = this.props.page
const { addPost, addComment } = this.props.pageActions
const { name, error } = this.props.user
const { handleLogin } = this.props.userActions
return <div>
<User name={name} error={error} handleLogin={handleLogin} />
<Page user={user} text={text} addPost={addPost} addComment={addComment} />
</div>
}
}
function mapStateToProps (state) {
return {
page: state.page,
user: state.user
}
}
function mapDispatchToProps(dispatch) {
return {
pageActions: bindActionCreators(pageActions, dispatch),
userActions: bindActionCreators(userActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
Второй вопрос:
Подскажите как лучше организовать архитектуру хранение и добавление статей в components/page?
(У статей будут еще коменты)
Append'ить, как я понимаю, совсем не кошерно, да?
https://github.com/SkunSHD/redux-twi...onents/Page.js
import React, { PropTypes, Component } from 'react'
import ReactDOM from 'react-dom'
export default class Page extends Component {
onCurrencyBtnClick = (e) => {
e.preventDefault()
const postText = ReactDOM.findDOMNode(this.refs.textarea_text).value;
console.log(postText)
this.props.addPost(postText)
}
render() {
const { user, text } = this.props
let formTemplate, postTemplate
if (user) {
formTemplate = <form>
<textarea
className='add__text'
defaultValue=''
placeholder='Type your text here...'
ref='textarea_text'
/>
<button
className='add_post__btn'
onClick={this.onCurrencyBtnClick}>
Add new post
</button>
</form>
}
if (text) {
postTemplate += <div className='post'>
<h3>Username: {user}</h3>
<p>Message: {text}</p>
</div>
}
return <div>
{formTemplate}
{postTemplate}
</div>
}
}
Page.propTypes = {
user: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
addPost: PropTypes.func.isRequired,
addComment: PropTypes.func.isRequired
}
