在道具更新时重新渲染组件（带有Redux）

Question

好的，我有2个组件，Map和App。应用程序组件基本上保存了地图。

这是我的应用程序的代码：

＆＃13;

＆＃13;

import React, { Component } from 'react';
import { Text, View } from 'react-native';

import { StackNavigator, TabNavigator } from 'react-navigation';
//Redux
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

//Screen Imports
import CenterNew from './screens/CenterNew';
import Map from './components/Map';
import Profile from './containers/Profile';
import Review from './containers/Review';

import { connect } from 'react-redux';

var store = createStore(rootReducer, {}, applyMiddleware(thunk));

class App extends Component {
	
	render () {
		
		{ console.ignoredYellowBox = ['Remote debugger']; }

		const MainScreenNavigator = TabNavigator({
		  Centers: {screen: Map},
		  Review: {screen: Review},
		  Profile: {screen: Profile}
		});

		MainScreenNavigator.navigationOptions = {
		  title: this.props.map.title
		};

		const Screens = StackNavigator({
		  Home: {screen: MainScreenNavigator},
		  CenterNew: {screen: CenterNew}
		});


		return (
			<Provider store={store}>
	    	  <Screens />
	    	</Provider>
    	);
	}
}

const connectWithStore = (store, WrappedComponent, mapStateToProps) => {
  let ConnectedWrappedComponent = connect(mapStateToProps)(WrappedComponent);
  return (props) => {
    return <ConnectedWrappedComponent {...props} store={store} />
  }
}

const mapStateToProps = (state) => {
	return {
		map: state.map
	};
};

App = connectWithStore(createStore(rootReducer, {}, applyMiddleware(thunk)), App, mapStateToProps);

export default App;

＆＃13;

＆＃13;

＆＃13;

在代码段中，我使用了标题  MainScreenNavigator.navigationOptions = { title: this.props.map.title };

因此，每当呈现App时，我都会记录您在componentWillMount()中看到的初始状态，这就是结果。一个syou可以看到，最初的标题是＆＃39; Home＆＃39;

现在，在我的地图中，我有一个触发此动作创建者的按钮，只是为了更改标题文本：

this.props.changeHeaderTitle('Test');
console.log(this.props.map);

代码：

export const changeHeaderTitle = (title) => {
return {
    type: 'CHANGE_HEADER_TITLE',
    payload: title
};

};

这是我的减速机：

＆＃13;

＆＃13;

const INITIAL_STATE = {
	isPinnable: false,
	pinnedCoordinateLatitude: 0,
	pinnedCoordinateLongitude: 0,
	region: {
	    latitude: 14.582524,
	    longitude: 121.061547,
	    latitudeDelta: 0.007,
	    longitudeDelta: 0.007
	},
	title: '',
	searched: false
};

export default (state = INITIAL_STATE, action) => {
	switch(action.type) {
		case 'ENABLE_PINNING':
			return { ... state, isPinnable: true }
		case 'DISABLE_PINNING':
			return { ... state, isPinnable: false,
				pinnedCoordinateLatitude: action.payload.latitude,
				pinnedCoordinateLongitude: action.payload.longitude }
		case 'GET_PINNED_COORDINATE':
			let test = action.payload.longitude;

			return { 
				...state, 
				isPinnable: false,
				pinnedCoordinateLatitude: action.payload.latitude,
				pinnedCoordinateLongitude: action.payload.longitude
			}
		case 'GET_CURRENT_REGION':
			return { ...state, region: region }
		case 'CHANGE_CURRENT_REGION':
			return { ...state, region: action.payload}
		case 'CHANGE_HEADER_TITLE':
			return { ...state, title: action.payload }
		case 'SEARCHED_VIEW':
			return { ...state, searched: action.payload }
		default:
			return state;
	}
};

＆＃13;

＆＃13;

＆＃13;

每当触发动作时，我知道标题已更新，因为我在

中看到了它

this.props.changeHeaderTitle('Test');

console.log(this.props.map);

但在我看来，标题仍然是“主页”......我提到了这一点：rerender react component when prop changes并尝试使用componentWillRecieveProps()，但它没有记录{{1动作是从Map组件触发的。

Answer 1

您需要将Redux商店与组件连接起来。因此，您应该添加以下代码段：

mapStateToProps(store){
    const { title } = store; 
    return { title }; 
}    
export default connect(mapStateToProps, { changeHeaderTitle })(App) 

mapStateToProps函数将订阅redux商店更新。每次状态发生变化时，您的组件都会自动重新呈现。您可以在此处找到有关将组件连接到redux商店的更多信息：react-redux api docs

Answer 2

您无法像提供的代码一样更新屏幕标题。

 //This is only needed if you want to set the title from another screen

 static navigationOptions = ({ navigation }) => { 
const {state} = navigation;
 return { title: `${state.params.title}`, 
}; 
}; 
ChangeThisTitle = (titleText) => { 
const {setParams} = this.props.navigation; setParams({ title: titleText }) 
} 

//Your render method
render(){
//Views goes here
 }

要更改标题，您可以从onPress调用更改标题方法。

您可以参考此link了解详情。