Задать вопрос

Aves

Ответы пользователя по тегу Redux

  • Webpack не показывает страницу с динамическим ID?

    @Aves
    Можно либо указывать абсолютные пути
    <script src="/bundle.js"></script>
    либо использовать тэг base
    <base href="/">
<script src="bundle.js"></script>
    Ответ написан
    Комментировать
    Комментировать

  • Как передать данные компоненту из контейнера в роутере?

    @Aves
    https://facebook.github.io/react/docs/context можно использовать.
    class Publication extends React.Component {
  state = {
    list: []
  };
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({list: [...this.state.list, new Date().toString()]});
    }, 10000);
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  static childContextTypes = {
    list: React.PropTypes.array
  };
  getChildContext() {
    return {
      list: this.state.list
    };
  }
  render() {
    return (
      <div>
        <h4>Publication</h4>
        {this.props.children}
      </div>
    );
  }
}

const PublicationList = (props, context) => (
  <ul>
    {context.list.map(e => <li key={e}>{e}</li>)}
  </ul>
);
PublicationList.contextTypes = {list: React.PropTypes.array};

    Вообще, не вижу, в чем сложность использовать redux, и зачем
    для каждого из них создавать свой редьюсер, экшен, константы
    Достаточно просто 
    export connect(state => ({list: state.publication.list}))(PublicationList)
    Ответ написан
    Комментировать
    Комментировать

  • React + Redux когда посылать AJAX запрос?

    @Aves
    Для redux нормальная схема. Чтобы избежать лишних отрисовок, нужно использовать shouldComponentUpdate, а запрос отправлять из componentWillReceiveProps. Можно приметно так:
    componentWillReceiveProps(nextProps) {
  if (nextProps.complete && !this.props.complete) this.sendRequest();
}

shouldComponentUpdate(nextProps) {
  const changed = Object.keys(nextProps).filter(e => nextProps[e] !== this.props[e]);
  if (changed.length == 1 && changed[0] == 'complete') return false;
}
    Ответ написан
    Комментировать
    Комментировать

  • React.js: В чем разница между State с типом Object и State с типом Array?

    @Aves
    Нужно Object.assign({}, state, {messages:action._data, loading:false})
    Ответ написан
    Комментировать
    Комментировать

  • Как в связке Redux + React.js кешировать ответы сервера и где?

    @Aves
    Middleware написать.
    Но если данные в store, не проще ли из компонента проверять их наличие и запрашивать только если их нет?
    Ответ написан
    Комментировать
    Комментировать

  • Redux - вызов dispatch из независимого модуля?

    @Aves
    Я бы делал через middleware, примерно так:

    middleware.js
    import io from 'socket.io-client';

export default ({dispatch, getState}) => {
  const socket = io();
  socket.on('dispatch', action => { dispatch(action) });

  return next => action => {
    const {type, payload, meta} = action;
    if (meta && meta.socket) {
      socket.emit(type, payload);
    } else {
      next(action);
    }
  };
};

    actions.js
    export const handleSubmit = data => ({
  type: 'SUBMIT_TO_SERVER',
  payload: data,
  meta: {socket: true}
});

export const handleChange = event => ({
  type: 'CHANGE_VALUE',
  payload: event.target.value
});

    reducer.js
    export default (state = '', {type, payload}) => {
  if (type == 'CHANGE_VALUE') return payload;
  else return state;
};

    form.jsx
    import {connect} from 'react-redux';
import {handleChange, handleSubmit} from 'actions';

const Form = ({state, handleChange, handleSubmit}) => <form onChange={handleChange} onSubmit={handleSubmit}>
  <input type='text' value={state} />
  <button>Submit</button>
</form>;

export default connect(state => state, {handleChange, handleSubmit})(Form);

    server.js
    socket.on('SUBMIT_TO_SERVER', data => {
  socket.emit('dispatch', {
    type: 'CHANGE_VALUE',
    payload: data ? data.toUpperCase() : ''
  });
});
    Ответ написан
    Комментировать
    Комментировать

  • Зачем нужен redux в сборке с React?

    @Aves
    Redux — это просто хранилище, обеспечивающее однонаправленный поток данных. Вот и храните в нём три массива: авторы, книги и жанры.
    Ответ написан
    4 комментария
    4 комментария