मैं रिएक्ट रिडक्स में स्टोर स्टेट तक कैसे पहुंच सकता हूं?

Question 1

मैं सिर्फ redux के साथ async सीखने के लिए एक सरल ऐप बना रहा हूँ। मुझे काम करते हुए सब कुछ मिल गया है, अब मैं सिर्फ वेब पेज पर वास्तविक स्थिति प्रदर्शित करना चाहता हूं। अब, मैं वास्तव में रेंडर विधि में स्टोर की स्थिति तक कैसे पहुंच सकता हूं?

यहाँ मेरा कोड है (सब कुछ एक पेज में है क्योंकि मैं अभी सीख रहा हूँ):

const initialState = {
        fetching: false,
        fetched: false,
        items: [],
        error: null
    }

const reducer = (state=initialState, action) => {
    switch (action.type) {
        case "REQUEST_PENDING": {
            return {...state, fetching: true};
        }
        case "REQUEST_FULFILLED": {
            return {
                ...state,
                fetching: false,
                fetched: true,
                items: action.payload
            }
        }
        case "REQUEST_REJECTED": {
            return {...state, fetching: false, error: action.payload}   
        }
        default: 
            return state;
    }
};

const middleware = applyMiddleware(promise(), thunk, logger());
const store = createStore(reducer, middleware);

store.dispatch({
    type: "REQUEST",
    payload: fetch('http://localhost:8000/list').then((res)=>res.json())
});

store.dispatch({
    type: "REQUEST",
    payload: fetch('http://localhost:8000/list').then((res)=>res.json())
});

render(
    <Provider store={store}>
        <div>
            { this.props.items.map((item) => <p> {item.title} </p> )}
        </div>
    </Provider>,
    document.getElementById('app')
);

इसलिए, राज्य के रेंडर तरीके में मैं item.titleस्टोर से सभी को सूचीबद्ध करना चाहता हूं ।

धन्यवाद

Question 2

आपको अलग घटक बनाना चाहिए, जो राज्य के बदलावों को सुन रहा होगा और हर राज्य के बदलाव पर अपडेट करेगा:

import store from '../reducers/store';

class Items extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
    };

    store.subscribe(() => {
      // When state will be updated(in our case, when items will be fetched), 
      // we will update local component state and force component to rerender 
      // with new data.

      this.setState({
        items: store.getState().items;
      });
    });
  }

  render() {
    return (
      <div>
        {this.state.items.map((item) => <p> {item.title} </p> )}
      </div>
    );
  }
};

render(<Items />, document.getElementById('app'));

Question 3

आयात connectसे react-reduxऔर राज्य के साथ घटक कनेक्ट करने के लिए इसका इस्तेमाल करते हैंconnect(mapStates,mapDispatch)(component)

import React from "react";
import { connect } from "react-redux";


const MyComponent = (props) => {
    return (
      <div>
        <h1>{props.title}</h1>
      </div>
    );
  }
}

अंत में आपको उन तक पहुंचने के लिए राज्यों को मैप्स की जरूरत है this.props

const mapStateToProps = state => {
  return {
    title: state.title
  };
};
export default connect(mapStateToProps)(MyComponent);

केवल वे राज्य जो आप नक्शे के माध्यम से सुलभ होंगे props

इस उत्तर को देखें: https://stackoverflow.com/a/36214059/4040563

आगे पढ़ने के लिए: https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132

Question 4

आपको Store.getState()अपने स्टोर की वर्तमान स्थिति प्राप्त करने के लिए उपयोग करने की आवश्यकता है ।

इस छोटे वीडियो को getState()देखने के बारे में अधिक जानकारी के लिए ।

Question 5

आप बस से अधिक करना चाहते हैं getState । आप स्टोर में हुए परिवर्तनों पर प्रतिक्रिया करना चाहते हैं।

यदि आप प्रतिक्रिया-रिडक्स का उपयोग नहीं कर रहे हैं, तो आप यह कर सकते हैं:

function rerender() {
    const state = store.getState();
    render(
        <div>
            { state.items.map((item) => <p> {item.title} </p> )}
        </div>,
        document.getElementById('app')
    );
}

// subscribe to store
store.subscribe(rerender);

// do initial render
rerender();

// dispatch more actions and view will update

लेकिन बेहतर है कि प्रतिक्रिया-रिडक्स का उपयोग करें। इस मामले में आप प्रदाता का उपयोग करते हैं जैसे कि आपने उल्लेख किया है, लेकिन फिर अपने घटक को स्टोर से कनेक्ट करने के लिए कनेक्ट का उपयोग करें।

Question 6

यदि आप कुछ उच्च-शक्ति वाले डिबगिंग करना चाहते हैं, तो आप राज्य के हर परिवर्तन की सदस्यता ले सकते हैं और एप्लिकेशन को देखने के लिए रोक सकते हैं कि विस्तार से क्या हो रहा है।

store.js

store.subscribe( () => {
  console.log('state\n', store.getState());
  debugger;
});

उस फ़ाइल में रखें जहाँ आप करते हैं createStore।

कॉपी करने के लिए stateक्लिपबोर्ड कंसोल से वस्तु, निम्न चरणों का पालन करें:

Chrome के कंसोल में किसी ऑब्जेक्ट पर राइट-क्लिक करें और स्टोर करें को संदर्भ मेनू से वैश्विक चर के रूप में चुनें। यह अस्थायी नाम के रूप में temp1 जैसा कुछ लौटाएगा।
क्रोम में भी एक copy()विधि है, इसलिए copy(temp1)कंसोल में उस ऑब्जेक्ट को अपने क्लिपबोर्ड पर कॉपी करना चाहिए।

https://stackoverflow.com/a/25140576

https://scottwhittaker.net/chrome-devtools/2016/02/29/chrome-devtools-copy-object.html

आप इस तरह से एक दर्शक दर्शक में वस्तु देख सकते हैं: http://jsonviewer.stack.hu/

आप यहां दो json ऑब्जेक्ट्स की तुलना कर सकते हैं: http://www.jsondiff.com/