Использование redux и store, как организовать вызов события по изменению состояния store?

Question

[vaskadogana]

нужно выполнить такую цепочку event > action > dispatch store > ?? > event > rerender
Там где знаки вопроса, не понимаю как реализовать
код постараюсь сделать максимально чистым

<form className="autorization_form">
class Languages extends React.Component{
		render() {
			return (
                                 <input 
                                          defaultValue = "ua"
		            	          onClick = {this.props.languageUpdate}
	   			 />
   		)
	   }
	};

var EAction = {
 LANGUAGE_UPDATE           : "LANGUAGE_UPDATE"
}
function reducer(state = { language : ""}, action) {
              case EAction.LANGUAGE_UPDATE:
	      	       return {
	       		     ...state,
	       		   language:  action.language,
               	      };   
 	      default:
	         return state;
	   }
	}
function languageUpdate(event){
		return {
	             type : EAction.LANGUAGE_UPDATE,
	             language : event.target.value, 
	   }   
}
var LanguagesController = connect(
		state =>({
			language : state.language
			}),
		dispatch => bindActionCreators({
			languageUpdate,
		}, dispatch)
)(Languages, FormAuthView)
var store = createStore(reducer, applyMiddleware(thunk));

мне нужно чтобы отработала эта функция setLanguage(),
не могу понять как заставить ее отработать по обновлению state.language</b>
function setLanguage(state){
					  state = store.getState();
					  var lang = state.language;	
			  		  language_variant.setLanguage(lang);
			  		  alert('languge was setup');
};

и произошел ререндер этого компонента ну или вообще любого (но это уже следующий вопрос))))
export default class Form extends React.Component{
	render(){
		return(
			<div>
				<div id="form_container">
					<Provider store = {store}>
						<FormAuthController/>
			      	</Provider>
			    </div>
			    <div className="languages_icon">
			      	<Provider store = {store}>
		     			<LanguagesController />
		     		</Provider>
			    </div>  
			    </div>	
		    )
	}
}

Answer 1

[Frozen Coder]

мне нужно чтобы отработала эта функция setLanguage(),
не могу понять как заставить ее отработать по обновлению state.language

Изучите жизненный цикл компонента. Если я всё правильно понял. Вам нужен метод компонента componentWillReceiveProps(nextProps) - там прописывайте всё, что делается при поступлении новых props. новый language придет к вам в nextProps, когда он изменится в Store, ибо вы же сделали connect.
Ваши функции сделайте методами класса, иначе они как-то оторваны от компонента, хотя используют его state. Посмотрите в сторону более современного синтаксиса в React и ES6, как минимум var уже не комильфо)
https://facebook.github.io/react/docs/react-compon...

Answer 2

[vaskadogana]

чтобы выполнить какое то событие по обновлению redux хранилища используйте функию subscribe()

store.subscribe(() =>
console.log(store.getState()) - событие которое должно произойти
)
store - название хранилища
Буду искать дальше как инициировать rerender компонента

Comments

[vaskadogana]

реагировать на изменение конкретного значения в хранилище
function select(store) {
return store.language
}
let currentValue
function listenLangeuage() {
let previousValue = currentValue
currentValue = select(store.getState())

if (previousValue !== currentValue) {
language_variant.setLanguage(currentValue);
console.log('Некоторое глубокое вложенное свойство измененное от ', previousValue, 'к', currentValue)
}
}