भ्रम के बिना Redux बनाम MobX

सामग्री:

1. हम किस समस्या का समाधान करते हैं?
2. REDUX और MOBX में क्या अंतर है?
3. प्रतिक्रिया अवस्था सीखने की अवस्था
4. विषय पर हाल के विचार
5. और अधिक संसाधनों

हम किस समस्या का समाधान करते हैं?

• एक घटक को दूसरे घटक के साथ राज्य साझा करना होगा
• एक घटक को किसी अन्य घटक की स्थिति को संशोधित करना होगा

REDUX और MOBX में क्या अंतर है?

एक शुद्ध कार्य एक फ़ंक्शन है जो इनपुट प्राप्त करता है, आउटपुट देता है, और समान कार्यों के अलावा कोई अन्य निर्भरता नहीं है। ऐसा फ़ंक्शन हमेशा एक ही इनपुट के साथ एक ही आउटपुट का उत्पादन करता है और इसका कोई दुष्प्रभाव नहीं होता है। अधिक जानकारी

(state, action) => newState

//     Redux,     
function addAuthor(state, action) {
  return state.authors.push(action.author);
}
//       
function addAuthor(state, action) {
  return [ ...state.authors, action.author ];
}

{
  post: {
    id: 'a',
    authorId: 'b',
    ...
  },
  author: {
    id: 'b',
    postIds: ['a', ...],
    ...
  }
}

function addAuthor(author) {
  this.authors.push(author);
}

{
  post: {
    id: 'a',
    ...
    author: {
      id: 'b',
      ...
    }
  }
}

एक रिपॉजिटरी बनाम कई

कार्यान्वयन कैसा दिखता है?

const initialState = {
  users: [
    {
      name: 'Alex'
    },
    {
      name: 'Nik'
    }
  ]
};
// reducer
function users(state = initialState, action) {
  switch (action.type) {
  case 'USER_ADD':
    return { ...state, users: [ ...state.users, action.user ] };
  default:
    return state;
  }
}
// action
{ type: 'USER_ADD', user: user };

class userStore{
@observable users = [
    {
      name: 'Nikita'
    }
  ];
}

class userStore{
@observable users = [
    {
      name: 'Nikita'
    }
  ];
}
@action addUser = (user) => {
    this.users.push(user);
  }

प्रतिक्रिया अवस्था सीखने की अवस्था

शुरुआती के लिए Redux या MobX?

— , JavaScript. , , - , , MobX.

Redux

अंतिम विचार

दोनों पुस्तकालय महान हैं। हालांकि Redux पहले से ही अच्छी तरह से स्थापित है, Mobx राज्य प्रबंधन के लिए एक व्यवहार्य विकल्प बन रहा है।

और अधिक संसाधनों