Question

我正在使用Redux构建一个简单的React Native应用。

这是我的初始状态

import { createStore } from "redux";
import reducer from "../reducers";

const initialState = {
  user: {
    uuid: null,
    bio: null,
    gender: null,
    full_name: null,
    cover_photo: null,
    profile_photo: null 
  },
  followers: {
    count: 0,
    list: null
  },
};

export const store = createStore(reducer, initialState);

动作

export const fetch_followers = (resp) => {
  return {
    type: FETCH_FOLLOWERS_SUCCESS,
    payload: resp
  }  
}

减速器

import { 
  FETCH_FOLLOWERS_SUCCESS 
} from '../actions';

export default (state, action) => {
  switch(action.type){
    case FETCH_FOLLOWERS_SUCCESS:
      return {
        ...state,
        followers: {
          count: action.payload.profiles.length,
          list: action.payload.profiles
        }
      }
    default:
      return state
  }
}

api包装器

class Client {
  constructor() {
    this.endpoints = {
        FETCH_MY_FOLLOWERS: 'https://run.mocky.io/v3/3d60da9d-1dd5-4e10-a69c-f2eefaa9a5da',
        FETCH_I_AM_FOLLOWING: 'https://run.mocky.io/v3/3d60da9d-1dd5-4e10-a69c-f2eefaa9a5da',

    }
  }

  followers() {
    return fetch(this.endpoints.FETCH_MY_FOLLOWERS).then(response => response.json());
  }

}

const client = new Client()
export default client;

我的视图组件

import React, { Component } from 'react';
import {SafeAreaView, ScrollView} from 'react-native';
import Follower from '../components/Follower'; 
import client from '../helpers/rabonia_sdk/RaboniaClient';
import { fetch_followers } from '../actions';
import { store } from '../store';



export default class Follow extends Component {
  constructor(){
    super()
  }

  componentDidMount() {
    client.followers().then(resp => {
        if(resp.status === "OK") {
          store.dispatch(fetch_followers(resp))
        }
    });
  }

  render() {
    return (
      <SafeAreaView>
        <ScrollView>
          {store.getState().followers.list.map(follower => <Follower follower={follower} /> )}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

那是模拟api响应

{
  "status": "OK",
  "message": "Fetched",
  "profiles": [
   {"uuid": "a72ef52a-b814-4bc8-85ee-263621a6d96d", "full_name": "Michael Ballack", "profile_photo": "https://picsum.photos/200" },
   {"uuid": "a72ef52a-b814-4bc8-85ee-263621a6d96d", "full_name": "Patrice Evra", "profile_photo": "https://picsum.photos/200" },
   {"uuid": "a72ef52a-b814-4bc8-85ee-263621a6d96d", "full_name": "Dennis Bergkamp", "profile_photo": "https://picsum.photos/200" },
   {"uuid": "a72ef52a-b814-4bc8-85ee-263621a6d96d", "full_name": "Michael Owen", "profile_photo": "https://picsum.photos/200" }
  ]
}

其他组件的结构相同，它们可以正常工作。

当我切换到本地状态（见下文）时，它可以工作，但无法确定将api有效负载分配到redux状态是什么问题？

export default class Follow extends Component {
  constructor(){
    super()
    this.state = {
      followers: []
    }
  }

  componentDidMount() {
    client.followers().then(resp => {
        if(resp.status === "OK") {
          this.setState({followers: resp.profiles});
          store.dispatch(fetch_followers(resp))
        }
    });
  }

  render() {
    let collection = store.getState().followers.list || this.state.followers
    return (
      <SafeAreaView>
        <ScrollView>
          {collection.map(follower => <Follower follower={follower} /> )}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

Answer 1

在化简文件中，必须为其分配您在顶部声明的initialState

export default (state = initialState , action) => {
  switch(action.type){
    case FETCH_FOLLOWERS_SUCCESS:
      return {
        ...state,
        followers: {
          count: action.payload.profiles.length,
          list: action.payload.profiles
        }
      }
    default:
      return state;
  }
}

Answer 2

使用HOC或useSelector，Follow组件不是Redux的connected。

文档here

示例：

const mapStateToProps = (state) => ({
    followers: getFollowersListSelector(state),
})


export default connect(
    mapStateToProps,
    {}
)(Follow)

选择器：

export const getFollowersSelector = state => state.followers

export const getFollowersListSelector = state => getFollowersSelector(state).list

并在render中使用它：

this.props.followers.map(...)

侧面说明：您可以使用功能组件和React＆Redux Hooks来使代码保持在最低限度，并使代码更具可读性。

Answer 3

其他组件的结构相同，它们可以正常工作。

在没有看到其他组件的情况下，不清楚您的意思是什么，但是您的商店未在此处连接到您的组件，这就是为什么在redux状态更新时该组件不会重新呈现的原因。

在此处查看connect()的文档：https://react-redux.js.org/api/connect

为什么redux不会更改状态？

3 个答案: