Контакты

Достижения

Все достижения (23)

Наибольший вклад в теги

Все теги (71)

Лучшие ответы пользователя

Все ответы (235)
  • Объясните простыми словами как работает Redux?

    У вас есть одно большое дерево, в котором хранится все состояние (state) приложения - это хранилище (store).
    Также у вас есть набор редьюсеров (которые скомбинированы в один общий rootReducer) - это функции, который принимают текущее состояние и действие и возвращают новое состояние:
    function someReducer(state = initialState, action) {
      // обычно выглядит как switch 
      // action - простой js-объект
      //              и обязательно имеет строковое поле type
      switch(action.type) {
        // обрабатываем действие с типом SOME_ACTION_NAME
        case 'SOME_ACTION_NAME':
          // берем какие-то данные из экшена и возвращаем новое состояние
          // при этом менять sate нельзя!
          // state.someProperty = action.newStateData <--- НЕТ!
          return { ...state, action.newStateData };
        // Если мы не обрабатываем действие - просто возвращаем старое состояние
        default:
          return state;
      }
    }


    Также есть экшен креаторы (actionCreators) - это функции, которые возвращают действие. затем это действие вещается в хранилище (диспатчится). Типичный пример:
    function someActionCreator(someArg) {
      return {
        type: 'SOME_ACTION_NAME',
        newStateData: someArg + 5, // <-- разная логика
      };
    }


    По-умолчанию в качестве экшена мы можем вернуть только простой объект, но при создании хранилища можно добавить так называемый middleWare. Это специальные функции, которые принимают все экшены из диспатча и могут передавать их дальше (при этом содержат дополнительную логику).

    Если мы хотим получить доступ к состоянию в экшен креаторе - воспользуемся thunkMiddleware:
    import thunkMiddleware from 'redux-thunk';
    
    function createStore(initialState) {
      const reducer = combineReducers(reducers);
      const finalCreateStore = applyMiddleware(
        thunkMiddleware // <-- добавляем middleware
      )(defaultCreateStore);
      return finalCreateStore(reducer, initialState);
    }


    Теперь мы можем делать так:
    function someActionCreator(someArg) {
      return (dispatch, getState) => { // <-- возвращаем фукнцию, а не объект!
        const someState = getState().reducerName;
        return {
          type: 'SOME_ACTION_NAME',
          newStateData: someArg + someState, 
        };
      };
    }


    В общем схема выглядит так:

    actionCreator --action--> dispatch --action--> middleware --action--> store --action--> reducer --> newState


    Затем мы берем из react-redux метод connect, который подключает Ваш умный компонент к хранилищу:
    import { connect } from 'react-redux';
    import { bindActionCreators } from 'redux';
    
    class MyComponent extends Component {
      static propTypes = {
        someProp: PropTypes.string.isRequired,
        someFunc: PropTypes.func.isRequired,
      };
    }
    
    // Тут мы берем из глобального состояния необходимую нам часть
    // В ownProps - свойства компонента. Тут могут быть например свойства от роутера
    function mapStateToProps(state, ownProps) {
      return {
        someProp: state.someReducer,
      };
    }
    
    function mapActionsToProps(dispatch) {
      return bindActionCreators ({ // <-- биндим все на disptach для удобства
        someFunc: (someArg) => someActionCreator(someArg + 1),
      }, dispatch);
    }
    
    export default connect(
      mapStateToProps,
      mapActionsToProps
    )(MyComponent);
    Ответ написан
    3 комментария
  • Как правильно создать структуру приложения на ReactJS + Laravel 5.3?

    На бэкенде: делаете rest-api с помощью Laravel.
    На фронтенде: берете реакт + редакс и разрабатываете приложение, которое будет общаться бэком через АПИ.
    Ответ написан
    Комментировать
  • Можно ли написать вирус на JavaScript?

    Начнем с того, что вирус - это довольно сложная вещь и состоит он обычно из нескольких модулей. Один из них - это эксплойт. Его основная задача - эксплуатировать уже известную уязвимость с целью получения возможности выполнения произвольного кода (как пример).

    Если мы мельком полистаем список уязвимостей, то увидим, что во многих из них фигурирует JS. Вот график взятый с того же сайта:
    RXmc_1mXxXA.jpg
    На нем прекрасно видно динамику уязвимостей приводящих к удаленному выполнению кода (красная линия). Отсюда логичный вывод - js можно использовать как эксплоит.

    Некоторые предыдущие ораторы неверно отмечали - браузер, как и любое другое полноценное приложение, имеет доступ к файловой системе (тот самый обычный доступ, когда можно писать, читать, создавать не системные файлы) посредством API операционной системы (например: WinAPI для windows). Внутри это все выглядит как системный вызов - программа передает управление на уровень ядра, предварительно сказав, что нужно открыть\создать\записать такой-то файл. Значит, нам нужен ассемблерный (да-да, не удивляйтесь) код, на который наш эксплоит передаст управление.

    Ок. Теперь перейдем к самому эксплоиту. Есть такая техника - heap spraying: мы берем нашу полезную (вредную) нагрузку и заполняем ей всю память:
    var buf = new Array();
    // заполним 200МБ памяти
    for(var i = 0;  i != 200; ++i) {
      buf[i] = nop + shellcode;
    }


    И, вполне возможно, что мы перезапишем определенные области (не буду вдаваться в подробности) и сможем выполнить наш shellcode. И да, как сказал riot26 - браузер после такого, скорее всего, крэшнется ... но нам это уже не важно - код будет внедрен и выполнен. Конечно, это банальщина и есть еще 100500 различных вариантов, о которых вам никто не расскажет, но идея ясна.

    PS пользуясь случаем - передаю привет людям в погонах!
    Ответ написан
    2 комментария
  • Обязательно ли необходим javascript для того, чтобы работать с angularjs?

    Просто как я понимаю из позиционирования jquery и angularjs - библиотека, упрощенный javascript, а второе - фреймворк, написанный на javascript'е, так?


    jQuery - библиотека, облегчающая работу с DOM
    Angular - фреймворк для построения single page application (spa)

    Ни то ни другое никак не "упрощает" javascript. Так что js Вам выучить придется.
    Ответ написан
    Комментировать
  • Как делать server-side rendering React.js на php?

    Делайте на PHP rest API и отдельно ставьте nodejs для рендеринга фронтенда... и будет вам счастье!)
    Ответ написан
    Комментировать

Лучшие вопросы пользователя

Все вопросы (19)