React + Redux connect (mapStateToProps)

Question

Gần đây tôi đã bắt đầu làm việc với React, và tôi rất thích nó ngay cả khi tôi liên tục gặp vấn đề.

---

Component # 1 nơi tôi thực hiện một GET-yêu cầu bởi một nhấp chuột vào một nút và tôi hiển thị một số dữ liệu trong một bảng.

Thành phần # 2 là trường nhập, nơi tôi muốn nhập một số dữ liệu và hiển thị dữ liệu bên dưới, phải đơn giản đúng không?

---

Khi tôi cử một hành động, và đã hoàn thành của tôi GET-yêu cầu, nhà nước trông như thế này:

{ 
    isFetching: false, 
    isPressed: true, 
    items: [{item: 1}, {item: 2}, {item: 3}] 
} 

Sau đó, tôi muốn hướng đến thành phần khác của tôi. Tôi có cần phải hủy đăng ký trạng thái ở đây không? Bởi vì khi tôi điều hướng đến trang khác của tôi, nơi thành phần khác của tôi là, trạng thái sẽ vẫn còn.

Nếu tôi cử một hành động trên tôi phần # 2 nhà nước trông như thế này:

[ 
    {id: 1, text: 'foo'}, 
    {id: 2, text: 'bar'} 
] 

Trong cả hai thành phần Tôi đang sử dụng mapStateToPros, mặc dù tôi không thực sự hiểu cách thức hoạt động và đó là ở đâu và tại sao tôi lại gặp phải những vấn đề mà tôi tin.

function mapStateToProps(state) { 
    return state; 
} 

Nó chỉ trả lại trạng thái lúc này. Và khi tôi chuyển đổi giữa các thành phần, tôi sẽ nhận được thông báo lỗi. Nếu tôi cử một hành động về thành phần của tôi # 2 và sau đó cố gắng để di chuyển đến thành phần # 1 (GET-YÊU CẦU) của tôi, tôi sẽ nhận được như sau:

prev state Object { isFetching=false, isPressed=true, items=[10]} 
action Object { type="ADD_TODO", id=0, text="asd"} 
next state [Object { id=0, text="asd"}] 

điều hướng tới trang khác

Error: `mapStateToProps` must return an object. Instead received [object Object]. 

MapStateToProps nên được sử dụng như thế nào trong kịch bản của tôi?

Tôi có cần sử dụng componentWillUnmount không? Không hủy đăng ký cửa hàng của tôi?

Tôi cảm thấy như tôi có thể hỏi một trăm câu hỏi, nhưng tôi sẽ không. Tôi liên tục đọc tài liệu nhưng tôi vẫn cố gắng tìm ra.

Bất kỳ liên kết, lời khuyên nào về quy trình suy nghĩ và những điều hữu ích khác đều được đánh giá cao.

EDIT:

Đây là giảm tốc của tôi:

Như Ricky gợi ý dưới đây, tôi cần phải thực hiện mảng của tôi vào một đối tượng.

case ADD_TODO: 
     return [ 
      ...state, 
      todo(undefined, action) 
     ] 


    const todo = (state = [], action) => { 

     case ADD_TODO: 
      return { 
       id: action.id, 
       text: action.text 
      } 
    } 

Nhưng "toán tử trải rộng" sẽ không hoạt động nếu tôi trả về đối tượng thay vì mảng. Có một lựa chọn khác sau đó (...)?

Answer 1

Đây là một mảng:

[ 
    {id: 1, text: 'foo'}, 
    {id: 2, text: 'bar'} 
] 

Làm cho nó một đối tượng:

{ 
    myData: [ 
    {id: 1, text: 'foo'}, 
    {id: 2, text: 'bar'} 
    ] 
} 

Và không "hủy đăng ký" từ nhà nước. Redux lưu trữ tất cả trạng thái trong một đối tượng. Mỗi thành phần chọn lọc khai báo những thuộc tính nào của trạng thái mà chúng cần trong một hàm (mapStateToProps) được cung cấp cho Redux connect().

Sửa

Để đối phó các bản cập nhật câu hỏi - bạn đang đi qua trong một mảng cho trạng thái mặc định. Sử dụng một đối tượng:

const todo = (state = {}, action) => { 
    // initialize your default state properties 

    switch (action.type) { 
    case ADD_TODO: 
     return { 
      ...state 
      id: action.id, 
      text: action.text 
     } 
    default: 
     return state; 
    } 
} 

Bạn có thể muốn khởi tạo thuộc tính trạng thái mặc định trong bộ giảm tốc của mình. Nhưng tất cả những thứ này là trong tài liệu/ví dụ.

Ồ, và nếu bạn đang hỏi tôi để được tư vấn thêm, đó là một lịch sự để upvote :)