Làm cách nào để truy cập trạng thái cửa hàng trong React Redux?

Question 1

Tôi chỉ đang tạo một ứng dụng đơn giản để học async với redux. Tôi đã làm cho mọi thứ hoạt động, bây giờ tôi chỉ muốn hiển thị trạng thái thực tế trên trang web. Bây giờ, làm cách nào để thực sự truy cập trạng thái của cửa hàng trong phương thức kết xuất?

Đây là mã của tôi (mọi thứ nằm trong một trang vì tôi chỉ đang học):

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')
);

Vì vậy, trong phương thức kết xuất của trạng thái, tôi muốn liệt kê tất cả những thứ item.titletừ cửa hàng.

Cảm ơn

Question 2

Bạn nên tạo thành phần riêng biệt, thành phần này sẽ lắng nghe các thay đổi trạng thái và cập nhật mỗi khi thay đổi trạng thái:

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

Nhập connecttừ react-reduxvà sử dụng nó để kết nối thành phần với trạng tháiconnect(mapStates,mapDispatch)(component)

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


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

Cuối cùng, bạn cần ánh xạ các trạng thái đến các đạo cụ để truy cập chúng bằng this.props

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

Chỉ các tiểu bang mà bạn lập bản đồ mới có thể truy cập được qua props

Kiểm tra câu trả lời sau: https://stackoverflow.com/a/36214059/4040563

Để đọc thêm: https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132

Question 4

Bạn cần sử dụng Store.getState()để có được trạng thái hiện tại của Cửa hàng của mình.

Để biết thêm thông tin về getState()xem này đoạn video ngắn.

Question 5

Bạn muốn làm nhiều hơn là chỉ getState. Bạn muốn phản ứng với những thay đổi trong cửa hàng.

Nếu bạn không sử dụng react-redux, bạn có thể làm như sau:

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

Nhưng tốt hơn là sử dụng react-redux. Trong trường hợp này, bạn sử dụng Nhà cung cấp như bạn đã đề cập, nhưng sau đó sử dụng kết nối để kết nối thành phần của bạn với cửa hàng.

Question 6

Nếu bạn muốn thực hiện một số gỡ lỗi mạnh mẽ, bạn có thể đăng ký mọi thay đổi của trạng thái và tạm dừng ứng dụng để xem những gì đang diễn ra chi tiết như sau.

store.js

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

Đặt nó vào tệp nơi bạn làm createStore.

Để sao chép stateđối tượng từ bảng điều khiển vào khay nhớ tạm, hãy làm theo các bước sau:

Nhấp chuột phải vào một đối tượng trong bảng điều khiển của Chrome và chọn Store dưới dạng Global Variable từ menu ngữ cảnh. Nó sẽ trả về một cái gì đó giống như temp1 làm tên biến.
Chrome cũng có một copy()phương thức, vì vậy copy(temp1)trong bảng điều khiển nên sao chép đối tượng đó vào khay nhớ tạm của bạn.

https://stackoverflow.com/a/25140576

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

Bạn có thể xem đối tượng trong trình xem json như thế này: http://jsonviewer.stack.hu/

Bạn có thể so sánh hai đối tượng json tại đây: http://www.jsondiff.com/