Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.12.2016, 20:32
Аватар для Neugierig
Новичок на форуме
Отправить личное сообщение для Neugierig Посмотреть профиль Найти все сообщения от Neugierig
 
Регистрация: 26.02.2016
Сообщений: 5

Redux twitter-like приложение - архитектурный вопрос
Подскажите как организовать архитектуру приложения, чтобы избежать перемешивания 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
}
Ответить с цитированием
  #2 (permalink)  
Старый 08.12.2016, 20:52
Аватар для Neugierig
Новичок на форуме
Отправить личное сообщение для Neugierig Посмотреть профиль Найти все сообщения от Neugierig
 
Регистрация: 26.02.2016
Сообщений: 5

Уточню еще, что я не понимаю, касательно второго вопроса.
Я думал, что 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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Меню с выезжающим сайдбаром Jaz Элементы интерфейса 17 26.06.2016 19:21
Всплытие событий или что то не так... Кирюха =) jQuery 6 30.03.2013 12:56