राज्य विलय

Question

के बजाय अधिलेखित हो रहा है, मैं वर्तमान में रेडक्स सीखने की कोशिश कर रहा हूं और मुझे लगता है कि मुझे इसे गलत तरीके से कार्यान्वित करना होगा क्योंकि वास्तव में पृष्ठ पर प्रस्तुत करने वाला अंतिम घटक वास्तव में काम करता है। मुझे संदेह है कि राज्य हर बार अधिलेखित किया जा रहा है।

मैंने this ट्यूटोरियल का पालन किया जो केवल डेटा पुनर्प्राप्ति का एक उदाहरण उपयोग करता है, इसलिए शायद मैंने बस राज्य को लिखना गलत समझा है।

यहां मेरा reducer है। कोई विचार जहां मैं गलत हो गया है? यह सब बहुत वर्बोज़ लगता है, क्या यह लिखने का एक ड्रियर तरीका है?

import Immutable from 'seamless-immutable'; 
import { combineReducers } from 'redux'; 
import { routerReducer } from 'react-router-redux'; 

// Import actions 
import { 
    REQUEST_CONFIG, 
    GET_CONFIG, 
    REQUEST_PAGES, 
    GET_PAGES, 
    REQUEST_SOCIAL_LINKS, 
    GET_SOCIAL_LINKS, 
    REQUEST_NAV, 
    GET_NAV 
} from './actions'; 

const configInitialState = Immutable({ 
    items: [], 
    isFetching: false 
}) 

const pagesInitialState = Immutable({ 
    items: [], 
    isFetching: false 
}) 

const socialLinksInitialState = Immutable({ 
    items: [], 
    isFetching: false 
}) 

const navInitialState = Immutable({ 
    items: [], 
    isFetching: false 
}) 

export function config(state = configInitialState, action) { 
    switch (action.type) { 
    case GET_CONFIG : 
     return Immutable(state).merge({ 
     items: action.payload.config[0], 
     isFetching: false 
     }) 
    case REQUEST_CONFIG : 
     return Immutable(state).merge({ 
     isFetching: true 
     }) 
    default: 
     return state; 
    } 
} 

export function pages(state = pagesInitialState, action) { 
    switch (action.type) { 
    case GET_PAGES : 
     return Immutable(state).merge({ 
     items: action.payload.pages, 
     isFetching: false 
     }) 
    case REQUEST_PAGES : 
     return Immutable(state).merge({ 
     isFetching: true 
     }) 
    default: 
     return state; 
    } 
} 

export function socialLinks(state = socialLinksInitialState, action)  { 
    switch (action.type) { 
    case GET_SOCIAL_LINKS : 
     return Immutable(state).merge({ 
     items: action.payload.socialLinks, 
     isFetching: false 
     }) 
    case REQUEST_SOCIAL_LINKS : 
     return Immutable(state).merge({ 
     isFetching: true 
     }) 
    default: 
     return state; 
    } 
} 

export function nav(state = navInitialState, action) { 
    switch (action.type) { 
    case GET_NAV : 
     return Immutable(state).merge({ 
     items: action.payload.nav, 
     isFetching: false 
     }) 
    case REQUEST_NAV : 
     return Immutable(state).merge({ 
     isFetching: true 
     }) 
    default: 
     return state; 
    } 
} 

const rootReducer = combineReducers({ 
    config, 
    pages, 
    socialLinks, 
    nav, 
    routing: routerReducer 
}); 

export default rootReducer; 

बस के मामले में यह आवश्यक है, यहाँ मेरी घटकों में से एक का एक उदाहरण के रूप में अच्छी तरह से है:

import React from 'react'; 
import { Link } from 'react-router'; 
import { connect } from 'react-redux'; 
import { navLoad } from '../../../scripts/actions'; 

export default class HeaderNav extends React.Component { 
    componentWillMount() { 
    const { dispatch } = this.props; 
    dispatch(navLoad()); 
    } 

    render() { 
    const { nav } = this.props; 
    const navitems = nav && nav.items ? nav.items.asMutable().map((item) => { 
     if(item.inNav === 'header' || item.inNav === 'both') { 
     return <li key={item._id}><Link to={item.slug}>{item.name}</Link></li> 
     } 
    }) : null; 
    if(nav.isFetching) { 
     return(
     <section class="loader"> 
      <span>Content is loading...</span> 
     </section> 
    ) 
    } else { 
     return(
     <nav class="c-primary-nav"> 
      <span class="c-primary-nav_toggle">Menu</span> 
      <ul> 
      { navitems } 
      </ul> 
     </nav> 
    ) 
    } 
    } 
} 

function select(state) { 
    const { nav } = state; 
    return { 
    nav 
    }; 
} 

export default connect(select)(HeaderNav); 

और यहाँ जहां घटकों कहा जाता है है:

import React from 'react'; 
import HeaderNav from './Header/nav.jsx'; 
import SocialLinks from './Header/socialLinks.jsx'; 

export default class Header extends React.Component { 
    render() { 
    return(
     <header class="c-global-header" role="banner"> 
     <HeaderNav /> 
     <SocialLinks /> 
     </header> 
    ) 
    } 
} 

अद्यतन: मैं अभी भी इस सवाल का जवाब देने की उम्मीद कर रहा हूं क्योंकि यह अभी भी मुझे रोक रहा है, मैंने कोड को थोड़ा बदल दिया है लेकिन इसका कोई फायदा नहीं हुआ है। आप यहां मेरा पूरा कोडबेस देख सकते हैं: https://github.com/alexward1981/portfolio-react (सभी प्रासंगिक सामग्री 'src' फ़ोल्डर में है)

Answer 1

यदि आपकी समस्या यह है कि आप पेज अपडेट करते समय किसी घटक के लिए नया डेटा प्राप्त करना चाहते हैं, तो डेटा-फ़ेचिंग घटक में WillMount() पर्याप्त नहीं है (क्योंकि इसे केवल घटक के पहले प्रतिपादन पर ही बुलाया जाता है)।

तुम भी, एक और घटक के जीवन चक्र विधि में डेटा में लाने के जोड़ने के लिए componentWillReceiveProps() है: यदि आप वास्तव में जांच करने के लिए

componentWillReceiveProps(nextProps) { 
    const { dispatch } = this.props; 
    dispatch(navLoad()); 
} 

आप एक उचित हालत (this.props साथ nextProps की तुलना) जोड़ सकते हैं प्रत्येक अद्यतन पर नए डेटा लाने की जरूरत है।

Answer 2

मैं निर्बाध-अपरिवर्तनीय से परिचित नहीं हूं, लेकिन आपकी समस्या आपके reducers में इसके उपयोग से संबंधित हो सकती है। क्या आप सुनिश्चित हैं कि यह लाइब्रेरी वास्तव में नए ऑब्जेक्ट संदर्भ उत्पन्न करती है जब राज्य में परिवर्तन होता है, क्योंकि इसे रेडक्स द्वारा आवश्यक है?

वैसे भी, आपको this library की तरह, रेडक्स और निर्बाध-अपरिवर्तनीय ढंग से गठबंधन करने के लिए अधिक कोड का उपयोग करना पड़ सकता है।

चीजों को सरल बनाने के लिए, मुझे लगता है कि आपको सादा जेएस अपरिवर्तनीयता पैटर्न (ऑब्जेक्ट.साइन(), या ऑब्जेक्ट स्प्रेड सिंटैक्स के साथ उदाहरण के लिए उपयोग करने की कोशिश करनी चाहिए) निर्बाध-अपरिवर्तनीय के बजाय। उदाहरण के लिए, अगर आप इस तरह अपने reducers लिख सकते हैं:

const navInitialState = { 
    items: [], 
    isFetching: false 
} 

function nav(state = navInitialState, action) { 
    switch (action.type) { 
    case GET_NAV : 
     return { 
     ...state, 
     items: action.payload.nav, 
     isFetching: false 
     } 
    case REQUEST_NAV : 
     return { 
     ...state, 
     isFetching: true 
     } 
    default: 
     return state 
    } 
} 

Answer 3

यह सब कुछ के बाद एक खूनी टाइपो जो मैं सिर्फ कभी नहीं देखा था। फ़िर भी सहायता के लिए धन्यवाद।

Answer 4

मुझे बस एक ही समस्या का सामना करना पड़ा, यह समस्या डिफ़ॉल्ट स्विच केस अनुभाग में वापसी स्थिति की बजाय reducer में थी, मैं प्रारंभिक स्थिति वापस कर रहा था।

export const getAppShopReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case types.FETCH_APP_SHOP_SUCCESS: 

     return state 
     .set('loading', false) 
     .set('user', action.payload.user) 
     .set('appShop', action.payload.appShop) 
     .set('shop', action.payload.shop) 
     ; 

    case types.FETCH_APP_SHOP_REQUEST: 

     return initialState.set('loading', true); 

    default: 
     return state; // Here's the problem, it was `initialState`; 
    } 
}; 

Answer 5

मैं combineReducers

http://redux.js.org/docs/api/combineReducers.html#notes

पर नोट में इस सूची को पढ़कर मेरी समस्या के माध्यम से काम करने के लिए कुछ मामलों में जहां यह स्वचालित रूप से अगर undefined राज्य को ठीक से समाधान नहीं है विफल रहता हैं सक्षम था।