Роман Александрович

нужно использовать серверную часть и хранить ответ от сервера. Обычно после отправки логина и пароля на сервер если все правильно то сервер возвращает токен который и нужно хранить.

Создать аккаунт разработчика бесплатно но вот если вы хотите выложить прижоление придется оплатить. Мак бук для этого покупать не обязательно. Но для загрузки билда надо иметь айфон

https://www.npmjs.com/package/@fortawesome/free-re...

https://github.com/rt2zz/redux-persist
этот пакет сохраняет состояние стора в AsyncStorage за вас. Тогда вам не нужно руками заносить данные в стор и это на много удобнее, но ваш метод тоже не плох.

class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {         
      newPerson: {
      }
    };
    this.getInputNameValue = this.getInputNameValue.bind(this);
    this.getInputSurnameValue = this.getInputSurnameValue.bind(this);
    this.getInputCityValue = this.getInputCityValue.bind(this);
    this.addToDatabase = this.addToDatabase.bind(this);
  }

  setNewPerson=(user)=>{
this.setState({
newPerson:user
})
}

  addToDatabase() {
    fetch(`http://127.0.0.1:3000/add/${this.state.newPerson}`, {
      method: 'PUT'
    })
      <...>
  }

  render() {
    return (
      <div>      
        <InputForm setNewPerson={this.setNewPerson} />          
        <Footer addToDatabase={this.addToDatabase}/>
      </div>
    );
  }
}
class InputForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user:{
      nameP: '',
      surnameP: '',
      cityP: '',
      value: ''
}
    };
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleSurnameChange = this.handleSurnameChange.bind(this);
    this.handleCityChange = this.handleCityChange.bind(this);    
  }

  handleNameChange(event) {
let user = this.state.user
let newUser = Object.assign(user,{nameP:event.target.value})
    this.setState({ user: newUser });
    this.props.setNewPerson(this.state.user);
  }

  handleSurnameChange(event) {
let user = this.state.user
let newUser = Object.assign(user,{surnameP:e.target.value})
    this.setState({ user: newUser });
   this.props.setNewPerson(this.state.user)
  }

  handleCityChange(event) {
let user = this.state.user
let newUser = Object.assign(user,{cityP:e.target.value})
    this.setState({ user: newUser });
    this.props.setNewPerson(this.state.user)
  }

  render() {
    return (
      <form className='row form'>        
            <label className='col-4 form__label' htmlFor='surnameMembers'>Фамилия</label>
            <input className='col-6 form-control' id='surnameMembers' name='surnameMembers'
              type='text' required value={this.state.surnameP}
              onChange={this.handleSurnameChange}
            />          
            <label className='col-4 form__label' htmlFor='nameMembers'>Имя</label>
            <input className='col-6 form-control' id='nameMembers' name='nameMembers'
              type='text' required value={this.state.nameP}
              onChange={this.handleNameChange}
            />
            <label className='col-4 form__label' htmlFor='cityMembers'>Город</label>
            <input className='col-6 form-control' id='cityMembers' name='cityMembers'
              type='text' required value={this.state.cityP}
              onChange={this.handleCityChange}
            />        
      </form>
    );
  }
}

все зависит от размера проекта. Считаю что если проект не большой и вам удобно перекидывать данные среди этих компонентов то нет смысла подключать редукс. Но если вы понимаете что уже запутались куда что прокидывается или понимаете что для прокидки данных в нужный вам компонент их надо прокинуть еще через 2 компонента то пора подключать редукс.

https://monsterlessons.com/project/series/react-dl...
тут же и по Redux есть

export const endWorkingDay = () => (dispatch, getState) => {
			return axios.post(`${API_ROOT}/api/Account/EndWork?date=${endDate}&tradePointId=${id}&lat=${currentLat}&long=${currentLong}`,
					null,
					{
						headers: {
							Authorization: `Bearer ${token}`,
							"Content-Type": "application/json;charset=UTF-8",
						},
					}
				)
				.then(
response => {
					
					if (response.status === 200) {
						dispatch({
							type: SET_END_WORK_DATA,
							payload: {
								endWorkData: {
									tradePointId: id,
									lat: currentLat,
									long: currentLong,
									date: dateformat(new Date(), "yyyy-mm-dd"),
									synced: true,
								},
							},
						})

Делаем запрос а затем используем диспатч для передачи данных в стор.

componentDidMount() {
   
      document.documentElement.addEventListener('scroll', this.handleScroll);
    
  }

  componentWillUnmount() {
    document.documentElement.removeEventListener('scroll', this.handleScroll);
  }

 
  handleScroll() {
   this.props.fetchData(url);
}

https://codesandbox.io/s/w7r2731458

componentWillReceiveProps(nextProps) {
        console.log("nextProps.idcat",nextProps.idcat)
if (nextProps.idcat!==undefined){
fetch(`${ENV.API_PROT}${ENV.API_LINK}/api/${ENV.API_VER_GLOBAL}/categories/${nextProps.idcat}`)
            .then(response => response.json())
            .then(json => { 
                console.log(json);
                this.setState({
                    sameNews: json.data,
                    isLoading: false
                });
                console.log(this.state.sameNews);
            });
}
      
    }