These are chat archives for dev-ua/reactjs

15th
Aug 2015
Aleksey Immuzov
@immuzov
Aug 15 2015 05:22
Подскажите, immutablejs нужно использовать повсеместно в reactjs?
Illia Seheda
@ALF-er
Aug 15 2015 06:50
"Нужно" - понятие растяжимое
Мне кажется я не так понял концепцию.
Illia Seheda
@ALF-er
Aug 15 2015 06:53
Я
Aleksey Immuzov
@immuzov
Aug 15 2015 06:55
Я?
Illia Seheda
@ALF-er
Aug 15 2015 06:56
Я бы определил общее правило: если конкретный "инстанс" данных будет передаваться между разными модулями приложения, то лучше чтоб он был иммутабельным
Конкретно тут странное решение передавать в экшнкреатор todo.toJS() а не просто todo
Aleksey Immuzov
@immuzov
Aug 15 2015 06:58
Это заглушка потому что не получилось там создать.
Illia Seheda
@ALF-er
Aug 15 2015 06:59
Где там?
В редюсере.
Подозреваю что в 28ом строке надо делать подругому.
В 11ой нельзя получить todo.get(‘id’) (это в случае если убрать toJS()).
Illia Seheda
@ALF-er
Aug 15 2015 07:01
Сек, с мобилы не удобно
Aleksey Immuzov
@immuzov
Aug 15 2015 07:02
Опыта нет, пытаюсь потыкаться, разобраться, но сложно. Смотрел разные проекты с immutable + redux. Не нашел подобного в них. Обычно get и все, update, set – нет примеров.
Illia Seheda
@ALF-er
Aug 15 2015 07:03
Про 11ую - не верю. Должно быть можно получить I'd
Aleksey Immuzov
@immuzov
Aug 15 2015 07:04
Uncaught TypeError: todo.get is not a function :(
Illia Seheda
@ALF-er
Aug 15 2015 07:05
Ты точно убрал .toJS()?
Aleksey Immuzov
@immuzov
Aug 15 2015 07:05
Так точно.
Если мало входных данных могу выложить полностью со ссылками на код ключевой.
вьюха: this.props.dispatch(TodoActionCreators.createTodo(todo));
экшен: просто проброс дальше todo
редюсер: [TODO_CREATE]: (state, { todo }) => state.push(createTodoItem(todo)),
функция createTodoItem:
const createTodoItem = (todo) => Map({
  id: todo.get('id'),
  copy: todo.get('copy'),
  complete: false,
});
Illia Seheda
@ALF-er
Aug 15 2015 07:06
10минут - буду за компом
Aleksey Immuzov
@immuzov
Aug 15 2015 07:06
Спасибо.
My fault. Я невнимательно правил код.
Illia Seheda
@ALF-er
Aug 15 2015 07:09
ок
Aleksey Immuzov
@immuzov
Aug 15 2015 07:10
Сейчас работает.
Но к вопросу о иммутабельности. В вьюхе я правильно это использую?
Или это слишком и не стоит тратить ресурсы зря?
Можно же this.state.todo сделать Object. Это то что работает только с формой. Хранит введеное значение, при добавлении в store.todos еще добавляется в todo идентификатор.
Illia Seheda
@ALF-er
Aug 15 2015 07:13
в принципе, норм. Именно потому, что ты дальше этот todo передаёшь куда-то ещё.

Посмотри ещё на Immutable.Record. Можно будет сделать:

export const Todo = Record({
     id: undefined,
    copy: "",
    complete: false
});

и потом сделать новый туду как new Todo({ copy: "Copy" }); и точно знать какая структура у него будет. И в компонентах можно делать

propTypes = {
    todo: PropTypes.instanceOf(Todo)
}
Aleksey Immuzov
@immuzov
Aug 15 2015 07:16

А разница есть что использовать: Map/List или fromJS?

this.state = {
      todo: fromJS({
        copy: '',
      }),
    };

Я точно знаю что у меня за структура, может правильней здесь использовать:

this.state = {
      todo: Map({
        copy: '',
      }),
    };

Как я понял fromJS сам определяет что это: array или object (с оговоркой что prototype не изменен).

Illia Seheda
@ALF-er
Aug 15 2015 07:17
объекты станут Мапами, массивы - Листами
Aleksey Immuzov
@immuzov
Aug 15 2015 07:17
О, круто, это аля модели?
Illia Seheda
@ALF-er
Aug 15 2015 07:17
вроде того. Удобная штука
Aleksey Immuzov
@immuzov
Aug 15 2015 07:17
Еще один шаг к типизации.
Illia Seheda
@ALF-er
Aug 15 2015 07:18
да. не надо проверять точно ли у переданного в компонент туду есть определённое поле.
Aleksey Immuzov
@immuzov
Aug 15 2015 07:18
Так fromJS – сахарок? Можно его всегда использовать или если известно что это объект, делать Map?
Illia Seheda
@ALF-er
Aug 15 2015 07:19

при добавлении в store.todos еще добавляется в todo идентификатор.

вот это ещё лучше сделать не в компоненте. Делай компоненты как можно глупее.

Aleksey Immuzov
@immuzov
Aug 15 2015 07:19
Я думал это в редюс запихнуть, но я не мог там получить state.todos
Чтобы посчитать какой id по номеру должен быть.
Сейчас перепроверю.
Illia Seheda
@ALF-er
Aug 15 2015 07:21
в редьюссере есть state
Aleksey Immuzov
@immuzov
Aug 15 2015 07:21
Да, state есть. Но как получить к state.todos доступ?
Illia Seheda
@ALF-er
Aug 15 2015 07:23

ты делаешь

  [TODO_CREATE]: (state, { todo }) => state.push(createTodoItem(todo)),

у тебя есть стейт - весь Лист

Aleksey Immuzov
@immuzov
Aug 15 2015 07:28
Глупый наверное вопрос, но state содержит абсолютно все? Или только todo? Например если у меня были бы еще notes лист, он бы их содержал?
А, нет, state идет от компонента. Я биндю экшены для этого компонента, в редюсерах получается стейт от этого компонента.
Так?
Illia Seheda
@ALF-er
Aug 15 2015 07:32
Нет, в редьюссер попадает не стейт компонента. Это стейт Стора.
Aleksey Immuzov
@immuzov
Aug 15 2015 07:33
В сторе – { todos: todos }, почему в reducer нет ключа todos? Он сразу идет как лист всех todo (todos).
Все, понял.
Я сам храню так.
initialState = List({})
И текущий state – это только область моих тудушек.
В нее ничего не попадет другое.
Будет экшен и редюсер для notes – у них будет своя область, а подписаться на все это можно в копонентах так:
@connect(({ todos, notes }) => ({ todos, notes }))
Illia Seheda
@ALF-er
Aug 15 2015 07:37
да
Aleksey Immuzov
@immuzov
Aug 15 2015 07:37
Супер, стало яснее, спасибо вам!
Компоненты – для рендера и передачи инфы дальше, редьюсеры – для обработки инфы и помещение в хранилище.
Illia Seheda
@ALF-er
Aug 15 2015 07:38
на ты. не за что
Aleksey Immuzov
@immuzov
Aug 15 2015 07:39
Ок ;)
Aleksey Immuzov
@immuzov
Aug 15 2015 10:17

А в чем разница между props и state? Прочитав эту статью (https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) сделал выводы:

  • Props - то что передается сверху, immutable.
  • State - то что меняется в компоненте.

@ALF-er Вопрос по поводу Record. В примере ты указал что это Props, но для компонента это мне кажется должен быть State. Так как для State указать instanceOf(Todo)?

Illia Seheda
@ALF-er
Aug 15 2015 10:25

эммм... стейт - это внутреннее состояние компонента, пропс - это внешние параметры.

<MyComponent myProp="myValue" />
внутри MyComponent у тебя будет this.props.myProp

Aleksey Immuzov
@immuzov
Aug 15 2015 10:25
Это я понимаю.
Illia Seheda
@ALF-er
Aug 15 2015 10:25
пример с Рекордом я делал не совсем для твоего примера
Aleksey Immuzov
@immuzov
Aug 15 2015 10:25
Это я тоже понял.
В моем случае я делаю так:
this.state = {
      todo: new Todo({ copy: '' }),
    };
Правильно?
Illia Seheda
@ALF-er
Aug 15 2015 10:26
допустим
Aleksey Immuzov
@immuzov
Aug 15 2015 10:26
К пропс это не имеет отношение никакого.
Оно только внутри.
Illia Seheda
@ALF-er
Aug 15 2015 10:31

да. Представь, что у тебя есть

<TodoList items={listOfTodos} />
и внутри него

render() {
    const { items } = this.props;

    return (
           <div>
                 {items.map((todo) => <Todo data={todo} />}
          </div>
    );
}

а внутри <Todo>

propTypes = {
     data: PropTypes.instanceOf(Todo).isRequired
}
Aleksey Immuzov
@immuzov
Aug 15 2015 10:33
А, понял. Я это не там использовал. Точнее надо в двух местах.