Вход

Просмотр полной версии : Redux twitter-like приложение - архитектурный вопрос


Neugierig
08.12.2016, 20:32
Подскажите как организовать архитектуру приложения, чтобы избежать перемешивания user и page сущностей:

Перемешивание констант page и user
https://github.com/SkunSHD/redux-twitter-like-app/blob/master/src/constants/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-twitter-like-app/blob/master/src/reducers/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-twitter-like-app/blob/master/src/reducers/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-twitter-like-app/blob/master/src/containers/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-twitter-like-app/blob/master/src/components/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).valu e;
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
}

Neugierig
08.12.2016, 20:52
Уточню еще, что я не понимаю, касательно второго вопроса.
Я думал, что state будет изменяться как в react и его состояние не будет обнуляться. А у меня state обнуляется и я не знаю из-за чего.
Ведь в доках пишут:
The reducer is a pure function that takes the previous state and an action, and returns the next state.

(previousState, action) => newState
http://redux.js.org/docs/basics/Reducers.html